禁止页面滚动的详细解决方法介绍

    xiaoxiao2021-04-16  142

    禁止页面滚动 有三种方法 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),但是谁让需求比较二逼呢对吧~ 如果你是 非常高级的用户需求,比如 你希望你的网站仍然能够兼容 手机端呢???? 上述是有问题的哦~~~~~~  卖个关子,接下来会写  手持设备兼容的解决方案。  声明: 文章转自 dravinFeng的博客:http://blog.sina.com.cn/s/blog_4714e47801019f6o.html,版权归原作者所有
    转载请注明原文地址: https://ju.6miu.com/read-672476.html

    最新回复(0)