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），可是谁让需求比较二逼呢对吧~

 

若是你是 很是高级的用户需求，好比 你但愿你的网站仍然可以兼容 手机端呢？？？？

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