H5禁止页面滑动/滚动
2016-08-17 11:55
465 查看
禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否
禁止页面滚动 有三种方法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),但是谁让需求比较二逼呢对吧~
如果你是 非常高级的用户需求,比如 你希望你的网站仍然能够兼容 手机端呢????
上述是有问题的哦~~~~~~ 卖个关子,接下来会写 手持设备兼容的解决方案。
相关文章推荐
- H5禁止页面滑动/滚动
- 移动设备禁止h5页面滚动
- H5禁止弹窗页面滚动
- 移动端h5页面弹窗出来后,禁止底层的背景页滚动
- 手机H5页面iframe子页面 禁止 父页面滚动条,滑动
- css ios H5页面web页面 上下滑动卡顿问题解决方案
- h5和chrome禁止页面缓存的方法
- 禁止页面滑动时会禁止一切事件这次记录使得状态过后再恢复滑动事件
- H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动
- swiper实现h5页面分屏应用,当一屏内容太多无法滑动显示
- 手机H5页面滑动事件
- Android 屏蔽/禁止ListView,GridView的滑动/滚动功能
- js禁止和启用移动端页面内容滚动
- Android ViewPaper禁止滑动切换页面
- 移动页面禁止左右滑动
- 禁止页面滚动效果
- 移动端蒙层底部页面禁止滑动
- android-整体UI设计-(滑动导航栏+滚动页面)
- h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽
- 用jq让移动端和PC端遮罩层弹出后页面禁止滚动