HTMLdiv id=”scrollPage” style=”position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:3;overflow:hidden;text-align:center;”div class=”scrollBox”第一頁/divdiv class=”scrollBox”第二頁/divdiv class=”scrollBox”第三頁/divdiv class=”scrollBox”第四頁/div/divJS(function(){ let scrollPage = document.getElementById('scrollPage'); scrollPage.style.visibility = “visible”; let boxes = document.querySelectorAll('.scrollBox'); let scrollTimeout = 0; let scrollInterval = 0; let wheelDelta = 0; let scrollIndex = 0; let targetTop = 0; let touchStartPoint = 0; let touchStartTop = 0; /*屏幕定位函數(shù)*/ let scrollTo = function(jump){ if(jump!==undefined){ if(jump===scrollIndex){return;} scrollIndex = jump; }else { if(scrollTimeout||scrollInterval||(wheelDelta0scrollPage.scrollTop==0)||(wheelDelta0scrollPage.scrollTop+scrollPage.offsetHeight==scrollPage.scrollHeight)){return;} scrollIndex = wheelDelta0?scrollIndex-1:scrollIndex+1; } targetTop = scrollIndex*scrollPage.offsetHeight; if(!(scrollTimeout||scrollInterval)){ scrollTimeout = window.setTimeout(function(){ scrollInterval = window.setInterval(function(){ let q = (targetTop-scrollPage.scrollTop)*0.25;//緩沖動作漫畫速度 scrollPage.scrollTop = scrollPage.scrollTop+q; if(parseInt(q)==0){ scrollPage.scrollTop = targetTop; window.clearInterval(scrollInterval); scrollTimeout = 0; scrollInterval = 0; } },50);//幀速度 },touchStartPoint?0:250);//使用鼠標(biāo)滑輪時的延時響應(yīng)（避免一次滾動多屏），如果是觸屏滑動事情則不延時 } }; /*鼠標(biāo)滾動事情*/ scrollPage.addEventListener('mousewheel',function(e){ wheelDelta = e.wheelDelta; scrollTo(); } ); /*觸屏滑動事情*/ scrollPage.addEventListener('touchstart',function(e){ touchStartPoint = e.touches[0].pageY; touchStartTop = scrollPage.scrollTop; e.preventDefault(); }); scrollPage.addEventListener('touchend',function(e){ wheelDelta = e.changedTouches[0].pageY-touchStartPoint; if(Math.abs(wheelDelta)75){ scrollTo(); }else{ scrollPage.scrollTop = touchStartTop; } }); scrollPage.addEventListener('touchmove',function(e){ if(!(scrollTimeout||scrollInterval)){ scrollPage.scrollTop = touchStartTop+(touchStartPoint-e.changedTouches[0].pageY); } }); /*定義右邊迅速導(dǎo)航按鈕*/ let navBar = document.createElement(“div”); navBar.setAttribute(“style”,”display:flex;flex-flow:column;align-items:center;justify-content:center;position:fixed;right:0px;top:50%;”); for(let i=0;iboxes.length;i++){ let navButton = document.createElement(“a”); navButton.setAttribute(“style”,”display:block;width:15px;height:15px;background:rgba(0,0,0,0.5);border-radius:100%;margin:10px;”); navButton.index = i; navButton.addEventListener(“click”,function(){ scrollTo(this.index); }); let scrollListener = function(e){ if(navButton.index==scrollIndex){ navButton.style.background = “rgba(255,255,255,0.5)”; }else{ navButton.style.background = “rgba(0,0,0,0.5)”; } }; scrollListener(); scrollPage.addEventListener(“scroll”,scrollListener); navBar.appendChild(navButton); } scrollPage.appendChild(navBar); navBar.style.marginTop = (navBar.offsetHeight/-2)+”px”; let init = function(){ for(let i=0;iboxes.length;i++){ let box = boxes[i]; box.setAttribute(“style”,”height:”+scrollPage.offsetHeight+”px;background:#”+((i+3)*123)+”;color:#fff;display:flex;justify-content:center;align-items:center;flex-flow:column;text-align:center;”); } } init(); //窗口尺寸變化時重置模塊高度以及定位 window.addEventListener(“resize”,function(){ init(); scrollPage.scrollTop = scrollIndex*scrollPage.offsetHeight });})();