js鼠标滚动一下滚一屏

Posted 2020-12-13 碧果果

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js鼠标滚动一下滚一屏相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<style>
html,body {height:100%;}
body {margin:0px;}
div {height:100%;}
</style>
<body>
<script>
addEventListener("DOMContentLoaded",function(){
  var body=document.body,html=document.documentElement;
  var itv,height=document.body.offsetHeight;
  var page=scrollTop()/height|0;
  //窗口大小改变事件
  addEventListener("resize",onresize),onresize();
  //滚轮事件
  document.body.addEventListener(
    "onwheel" in document?"wheel":"mousewheel",
    function(e){
      clearTimeout(itv);
      itv=setTimeout(function(){
        var delta=e.wheelDelta/120||-e.deltaY/3;
        page-=delta;
        var max=(document.body.scrollHeight/height|0)-1;
        if(page<0)return page=0;
        if(page>max)return page=max;
        move();
      },100);
      e.preventDefault();
    }
  );
  //平滑滚动
  function move(){
    var value=height*page;
    var diff=scrollTop()-value;
    (function callee(){
      diff=diff/1.2|0;
      scrollTop(value+diff);
      if(diff)itv=setTimeout(callee,16);
    })();
  };
  //resize事件
  function onresize(){
    height=body.offsetHeight;
    move();
  };
  //获取或设置scrollTop
  function scrollTop(v){
    if(v==null)return Math.max(body.scrollTop,html.scrollTop);
    else body.scrollTop=html.scrollTop=v;
  };
});
</script>
<div style="background:#FEE;"></div>
<div style="background:#EFE;"></div>
<div style="background:#EEF;"></div>

友情链接

https://www.cnblogs.com/xiaohuochai/p/7372665.html

以上是关于js鼠标滚动一下滚一屏的主要内容，如果未能解决你的问题，请参考以下文章

js滚轮换切屏

一屏滚动滚轮事件

man快捷键使用

fullPage.js 怎么样才能实现点击按钮滚动一屏的效果

vi操作小总结

JS中如何让弹出页面居中且随页面的滚动而滚动？效果请参阅豆瓣。