搜索
您的当前位置:首页正文

H5禁止页面滑动滚动

来源:知库网
H5禁⽌页⾯滑动滚动

禁⽌页⾯滚动--完美解决⽅案,滚动条显⽰与否,⼿持设备兼容与否

禁⽌页⾯滚动 有三种⽅法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),但是谁让需求⽐较⼆逼呢对吧~

如果你是 ⾮常⾼级的⽤户需求,⽐如 你希望你的⽹站仍然能够兼容 ⼿机端呢上述是有问题的哦~~~~~~ 卖个关⼦,接下来会写 ⼿持设备兼容的解决⽅案。

因篇幅问题不能全部显示,请点此查看更多更全内容

Top