禁止页面滚动的详细解决方法介绍

来源：互联网发布：社交网络迅雷下载编辑：程序博客网时间：2024/05/29 18:21

禁止页面滚动有三种方法

1，依靠css 将页面

document.documentElement.style.overflow='hidden';document.body.style.overflow='hidden';//手机版设置这个。

如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。

但是你用键盘的上下左右键，你会发现，页面仍然可以滚动。别着急往下看

2，在 1 的基础上添加 js功能

  var move=function(e){    e.preventDefault && e.preventDefault();    e.returnValue=false;    e.stopPropagation && e.stopPropagation();    return false;  }  var keyFunc=function(e){    if(37<=e.keyCode && e.keyCode<=40){      return move(e);    }  }  document.body.onkeydown=keyFunc;

好了，到了这里，你会发现页面木有任何问题了。鼠标，键盘都不能将页面滚动。

不过....对于高级用户来说，仍然有问题，比如继续往下看

3，假设用户希望滚动条一直处于显示状态肿么办捏？？？？ ok ,继续

  var st
  var scroll=function(e){
    clearTimeout(st);
    st=setTimeout(function(){
      window.scrollTo(loc.scrollLeft,loc.scrollTop);
    },5);
 }
 window.onscroll=scroll;

上述代码可以似的用户的任何滚动操作，都将被还原。注意这个方式很消耗内存（虽然做了setTimeout），但是谁让需求比较二逼呢对吧~

如果你是非常高级的用户需求，比如你希望你的网站仍然能够兼容手机端呢？？？？

上述是有问题的哦~~~~~~ 卖个关子，接下来会写手持设备兼容的解决方案。

声明：

文章转自dravinFeng的博客：http://blog.sina.com.cn/s/blog_4714e47801019f6o.html，版权归原作者所有

0 0