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

禁止页面滚动 有三种方法

1，依靠css 将页面

[javascript]  view plain  copy

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

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

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

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

[javascript]  view plain  copy

1. var move=function(e){  
2.   e.preventDefault && e.preventDefault();  
3.   e.returnValue=false;  
4.   e.stopPropagation && e.stopPropagation();  
5.   return false;  
6. }  
7. var keyFunc=function(e){  
8.   if(37<=e.keyCode && e.keyCode<=40){  
9.     return move(e);  
10.   }  
11. }  
12. document.body.οnkeydοwn=keyFunc;  

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

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

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

[javascript]  view plain  copy

1.   

var st

var scroll=function(e){

clearTimeout(st);

st=setTimeout(function(){

window.scrollTo(loc.scrollLeft,loc.scrollTop);

},5);

 }

 window.οnscrοll=scroll;

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

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

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

声明：

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