禁止頁面滾動--完美解決方案,滾動條顯示與否,手持設備兼容與否
禁止頁面滾動 有三種方法
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),但是誰讓需求比較二逼呢對吧~
如果你是 非常高級的用戶需求,比如 你希望你的網站仍然能夠兼容 手機端呢????
上述是有問題的哦~~~~~~ 賣個關子,接下來會寫 手持設備兼容的解決方案。