锐客网

  1. 首页 > 睿知 > >

简洁的纯JS全屏滚动代码-兼容移动端浏览器

生活知识经验知识


简洁的纯JS全屏滚动代码-兼容移动端浏览器

文章插图
【简洁的纯JS全屏滚动代码-兼容移动端浏览器】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; /*屏幕定位函数*/ 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);//使用鼠标滑轮时的延时响应（避免一次滚动多屏） 。如果是触屏滑动事情则不延时 } }; /*鼠标滚动事情*/ 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); } }); /*定义右边迅速导航按钮*/ 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 });})();

    推荐阅读


    上一篇：脑子不好吃什么补脑？

    下一篇：她 大学宿友的哪些行为你想揍他？