H5禁止页面滑动/滚动

时间:2025-02-06 11:14:55

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否

禁止页面滚动 有三种方法

1,依靠css 将页面

='hidden';

 

='hidden';//手机版设置这个。

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

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

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

    var move=function(e){

&& ();

=false;

&& ();

return false;

    }

    var keyFunc=function(e){

if(37<= && <=40){

return move(e);

}

}

    .οnkeydοwn=keyFunc;

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

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

 

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

    var st

    var scroll=function(e){

clearTimeout(st);

st=setTimeout(function(){

(,);

},5);

    }

    window.οnscrοll=scroll;

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

感谢分享/lxg0/p/