H5禁止页面滑动/滚动
禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否
禁止页面滚动 有三种方法
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/lxg0/p/5779451.html
H5禁止页面滑动/滚动相关推荐
- uniapp禁止页面上下滚动
uniapp禁止页面上下滚动 功能场景 第一个方法"app-plus":{"bounce":"none"} 第二个方法 功能场景 我目前是在 ...
- 如何去掉微信小程序导航栏,以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
- uni-app - APP平台禁止页面滑动(无法上下滚动屏幕页面)
前言 注意:仅 APP 平台,在 pages.json 中进行配置. 有些时候,我们需要将页面固定住,让用户无法下拉与滚动页面. 全局配置 在 globalStyle 中进行配置,便是所有页面均有效. ...
- uni-app - ios禁止页面滑动(无法上下滚动屏幕页面)
注意:仅 APP 平台 在 pages.json 中进行配置 有些时候,我们需要将页面固定住,让用户无法下拉与滚动页面. 全局配置 在 globalStyle 中进行配置,便是所有页面均有效.&quo ...
- h5禁止页面长按操作_HTML5 对于手机页面长按会粘贴复制的禁用 (解决方案)
解决方案: 直接在CSS 文件中添加下面的代码,就可以实现了在手机端禁止粘贴复制的功能: *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-u ...
- H5禁止弹窗页面滚动
这篇文章讲解一下,弹窗弹出以后,如何禁止页面滑动的技巧. 如下图所示,在"弹窗"弹出后页面是可以滚动的. 解决方案: 第一步: 在点击弹框的事件中添加: $("body& ...
- vue弹层时禁止页面滚动
创建组件时禁止页面滚动: created(){//禁止页面滑动document.body.addEventListener('touchmove', this.bodyScroll, { passiv ...
- vue中禁止页面滚动/滚动事件穿透
1.移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.prevent></div ...
- vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面 移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...
最新文章
- C++ 名字重载、隐藏、覆盖
- 模拟操作系统动态内存管理(c实现)
- fill in icon logic
- USACO Training Section 1.1黑色星期五Friday the Thirteenth
- 高通董事长:努力降低智能手机价格
- springboot starter工作原理_98,谈谈SpringBoot的工作原理
- Linux安装的分区问题
- https 加端口_Ubuntu 安装Node 10.16 跑 Nodeppt 加Hexo博客再来个为知笔记私有云
- 如何升级mysql-libs_MySQL升级教程(CentOS)
- (转)量化投资大师采访摘录-詹姆斯·西蒙斯 James Simons
- 部署AdminLTE
- UML统一建模语言习题一
- 非法集资(Illegal Fund-raising)
- matlab编程excosxdx求积分,分部积分
- 使用WebGL绘制流动虚线
- gige相机二次开发_GigE Vision接口摄像机及其应用
- jad文件生成工具--jad easy
- PTES-渗透测试执行标准
- 【今日收获】关于	[Error] name lookup of ‘i‘ changed for ISO ‘for‘ scoping [-fpermissive]的解决方法
- 关于安装sqlserver sp4的一些小问题