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），可是誰讓需求比較二逼呢對吧~

 

若是你是 很是高級的用戶需求，好比 你但願你的網站仍然可以兼容 手機端呢？？？？

上述是有問題的哦~~~~~~  賣個關子，接下來會寫  手持設備兼容的解決方案。