禁止页面滚动的详细解决方法介绍
2017-04-14 10:01
369 查看
禁止页面滚动 有三种方法
1,依靠css 将页面
如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效。
但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动。 别着急 往下看
2,在 1 的基础上 添加 js功能
好了 ,到了这里,你会发现页面木有任何问题了。鼠标,键盘 都不能将页面滚动。
不过....对于高级用户来说,仍然有问题,比如 继续往下看
3,假设用户希望 滚动条 一直处于显示状态 肿么办捏???? ok ,继续
var st var scroll=function(e){ clearTimeout(st); st=setTimeout(function(){ window.scrollTo(loc.scrollLeft,loc.scrollTop); },5); } window.onscroll=scroll;
上述代码 可以似的 用户的任何滚动操作,都将被还原。注意这个方式很消耗内存(虽然做了setTimeout),但是谁让需求比较二逼呢对吧~
如果你是 非常高级的用户需求,比如 你希望你的网站仍然能够兼容 手机端呢????
上述是有问题的哦~~~~~~ 卖个关子,接下来会写 手持设备兼容的解决方案。
声明:
文章转自dravinFeng的博客:http://blog.sina.com.cn/s/blog_4714e47801019f6o.html,版权归原作者所有
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),但是谁让需求比较二逼呢对吧~
如果你是 非常高级的用户需求,比如 你希望你的网站仍然能够兼容 手机端呢????
上述是有问题的哦~~~~~~ 卖个关子,接下来会写 手持设备兼容的解决方案。
声明:
文章转自dravinFeng的博客:http://blog.sina.com.cn/s/blog_4714e47801019f6o.html,版权归原作者所有
相关文章推荐
- 移动端和PC端遮罩层弹出后,页面禁止滚动的解决方法
- position:sticky介绍 页面滚动导航条始终在最顶部的实现方法
- iScroll4 禁止select等页面元素默认事件的解决方法 转
- 水星路由器设置的详细方法和上网常见故障解决方法介绍(图文教程)
- SQL Server 2012 “对象资源管理器详细”页面一直处于“正在加载”的可尝试性解决方法
- 在 360浏览器下 position:relative; 不随着滚动条的滚动而滚动而是飘在页面上 解决方法 给父级也就是出现滚动条的元素添加 position:relative;就ok l了
- 在vs2010中编译log4cxx-0.10.0详细方法(从下载、编译、解决错误详细介绍
- 详细介绍ASP.NET页面重定向方法
- 在vs2010中编译log4cxx-0.10.0详细方法(从下载、编译、解决错误详细介绍)(转载)
- win8系统中出现自动断网的情况的解决方法详细介绍
- 简单暴力的禁止html页面滚动的方法
- 解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法
- 基于php上传图片重命名的6种解决方法的详细介绍
- Windows.old详细介绍解决方法
- 基于php上传图片重命名的6种解决方法的详细介绍
- MARQUEE 滚动效果,含有MARQUEE的页面在 在firefox下也能运行?!及不能运行的解决方法
- 详细介绍ASP.NET页面间数据传递的使用方法
- windows to go u盘无法启动的解决方法图文详细介绍
- 在vs2010中编译log4cxx-0.10.0详细方法(从下载、编译、解决错误详细介绍)
- 解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法