js禁止鼠标滑轮_简洁的纯JS全屏滚动代码-兼容移动端浏览器

HTML

第一页

第二页

第三页

第四页

JS

(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||(wheelDelta>0&&scrollPage.scrollTop==0)||(wheelDelta<0&&scrollPage.scrollTop+scrollPage.offsetHeight==scrollPage.scrollHeight)){return;} scrollIndex = wheelDelta>0?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