如何禁止页面滚动

禁止页面滚动 有三种方法

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.οnkeydοwn=keyFunc;
好了 ,到了这里,你会发现页面木有任何问题了。鼠标,键盘 都不能将页面滚动。
不过....对于高级用户来说,仍然有问题,比如 继续往下看
 
3,假设用户希望 滚动条 一直处于显示状态 肿么办捏???? ok ,继续
    var st
    var scroll=function(e){
clearTimeout(st);
st=setTimeout(function(){
window.scrollTo(loc.scrollLeft,loc.scrollTop);
},5);
    }
    window.οnscrοll=scroll;
上述代码 可以似的 用户的任何滚动操作,都将被还原。注意这个方式很消耗内存(虽然做了setTimeout),但是谁让需求比较二逼呢对吧~
 
如果你是 非常高级的用户需求,比如 你希望你的网站仍然能够兼容 手机端呢????
上述是有问题的哦~~~~~~  卖个关子,接下来会写  手持设备兼容的解决方案。 

转载于:https://www.cnblogs.com/stephenykk/p/3445879.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值