禁止蒙层底部页面跟随滚动 1
场景概述
弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为。
那么,如何阻止呢?请看以下分析:
方案分析
方案一
- 打开蒙层时,给body添加样式:
overflow: hidden;
height: 100%;
复制代码
在某些机型下,你可能还需要给根节点添加样式:
overflow: hidden;
复制代码
- 关闭蒙层时,移除以上样式。
优点: 简单方便,只需添加css样式,没有复杂的逻辑。
缺点: 兼容性不好,适用于pc,移动端就尴尬了。 部分安卓机型以及safari中,无法无法阻止底部页面滚动。
如果需要应用于移动端,那么你可能需要方案二。
方案二
就是利用移动端的touch事件,来阻止默认行为(这里可以理解为页面滚动就是默认行为)。
// node为蒙层容器dom节点
node.addEventListener('touchstart', e => {e.preventDefault()
}, false)
复制代码
简单粗暴,滚动时底部页面也无法动弹了。假如你的蒙层内容不会有滚动条,那么上述方法prefect。
但是,最怕空气突然安静,假如蒙层内容有滚动条的话,那么它再也无法动弹了。因此我们需要写一些js逻辑来判断要不要阻止默认行为,复杂程度明显增加。
具体思路:判定蒙层内容是否滚动到尽头,是则阻止默认行为,反之任它横行。
示例代码如下:
<body><div class="page"><!-- 这里多添加一些,直至出现滚动条 --><p>页面</p><p>页面</p><button class="btn">打开蒙层</button><p>页面</p></div><div class="container"><div class="layer"></div><div class="content"><!-- 这里多添加一些,直至出现滚动条 --><p>蒙层</p><p>蒙层</p><p>蒙层</p></div></div>
</body>
复制代码
body {margin: 0;padding: 20px;
}.btn {border: none;outline: none;font-size: inherit;border-radius: 4px;padding: 1em;width: 100%;margin: 1em 0;color: #fff;background-color: #ff5777;
}.container {position: fixed;top: 0;left: 0;bottom: 0;right: 0;z-index: 1001;display: none;
}.layer {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 1;background-color: rgba(0, 0, 0, .3);
}.content {position: absolute;bottom: 0;left: 0;right: 0;height: 50%;z-index: 2;background-color: #f6f6f6;overflow-y: auto;
}
复制代码
const btnNode = document.querySelector('.btn')
const containerNode = document.querySelector('.container')
const layerNode = document.querySelector('.layer')
const contentNode = document.querySelector('.content')
let startY = 0 // 记录开始滑动的坐标,用于判断滑动方向
let status = 0 // 0:未开始,1:已开始,2:滑动中// 打开蒙层
btnNode.addEventListener('click', () => {containerNode.style.display = 'block'
}, false)// 蒙层部分始终阻止默认行为
layerNode.addEventListener('touchstart', e => {e.preventDefault()
}, false)// 核心部分
contentNode.addEventListener('touchstart', e => {status = 1startY = e.targetTouches[0].pageY
}, false)contentNode.addEventListener('touchmove', e => {// 判定一次就够了if (status !== 1) returnstatus = 2let t = e.target || e.srcElementlet py = e.targetTouches[0].pageYlet ch = t.clientHeight // 内容可视高度let sh = t.scrollHeight // 内容滚动高度let st = t.scrollTop // 当前滚动高度// 已经到头部尽头了还要向上滑动,阻止它if (st === 0 && startY < py) {e.preventDefault()}// 已经到低部尽头了还要向下滑动,阻止它if ((st === sh - ch) && startY > py) {e.preventDefault()}
}, false)contentNode.addEventListener('touchend', e => {status = 0
}, false)
复制代码
问题虽然是解决了,但是回头来看,复杂程度和代码量明显增加了一个梯度。 本着简单方便的原则,我们是不是还可以探索其他的方案呢?
既然touch事件判定比较复杂,何不跳出这个框框,另辟蹊径,探索更加合适的方案。 于是,便有了我们的方案三。
方案三
来讲讲我的思路,既然我们要阻止页面滚动,那么何不将其固定在视窗(即position: fixed
),这样它就无法滚动了,当蒙层关闭时再释放。 当然还有一些细节要考虑,将页面固定视窗后,内容会回头最顶端,这里我们需要记录一下,同步top值。
示例代码:
let bodyEl = document.body
let top = 0function stopBodyScroll (isFixed) {if (isFixed) {top = window.scrollYbodyEl.style.position = 'fixed'bodyEl.style.top = -top + 'px'} else {bodyEl.style.position = ''bodyEl.style.top = ''window.scrollTo(0, top) // 回到原先的top}
}
复制代码
思考总结
- 若应用场景是pc,推荐方案一,真的是不要太方便
- 若应用场景是h5,你可以采用方案二,但是我建议你采用方案三
- 若应用场景是全平台,那么方案三你不容错过
本文到这里也即将结束了,在这里我强烈推荐一下方案三,原因在于简单、方便、兼容性好,一次封装,永久受用。
链接:https://juejin.im/post/5a27cad56fb9a045186a9d94
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
禁止蒙层底部页面跟随滚动 1相关推荐
- 禁止蒙层底部页面跟随滚动
场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这 ...
- Vue出现弹出层时,禁止底部页面跟随滑动
背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmo ...
- # 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动 一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
- 微信小程序 - 解决自定义添加遮罩层,底部页面仍滚动
前言 底部的页面有滚动条,在自定义组件创建遮罩层时,底部页面仍然会滑动 解决方法: 为了防止事件冒泡,在遮罩层容器内设置 // 小程序 catchtouchmove="true" ...
- android 禁止屏幕放大缩小,禁止APP内Webview页面跟随系统缩放字号
最近开始做适配移动端的网页,通过APP内部的Webview展示.为了在不同分辨率的设备上都能按相同的布局来展示,使用了rem布局的页面自适应方式: (function (doc, win) { var ...
- 蒙层禁止页面滚动的方案
蒙层禁止页面滚动的方案 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是在蒙层出现的时候滚动页面,如果不加处理,蒙层底部的页面会开始滚动,实际上我 ...
- 蒙层禁止下方页面滚动防抖动完美方案
文章目录 学习链接 前言 蒙层禁止页面滚动的方案 实现 body hidden touch preventDefault body fixed 解决js 禁止滚动条滚动,并且滚动条不消失,页面大小不闪 ...
- vue弹出层滑动禁止背景跟着滑动_vue移动端弹起蒙层滑动禁止底部滑动操作
解决办法 在蒙层弹起的时候将body设置为fixed定位 在蒙层消失的时候将body恢复原位 popupVisible(newValue) { if (newValue) { document.bod ...
- vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面 移动端 在蒙层所在div上加 @touchmove.prevent <div class="maskBox" @touchmove.preve ...
最新文章
- php清除账号登录,php实现账号登录/上传/下载/删除文件
- 海尔智家股市被看好,增长逻辑令人深思
- 命令回复mysql数据库_用命令行恢复MySQL数据库
- ubuntu中获取文件名称并生成txt文件
- Filter责任链模式
- FLUSH TABLES WITH READ LOCK 和 LOCK TABLES比较
- Spring学习总结(22)——spring-framework-bom解决spring的不同模块依赖版本不同问题...
- selenium-webdriver——如何在启动firefox时加载扩展
- SolarWinds 软件出现3个新的严重漏洞
- 大数据技术在各行业中的挑战有哪些
- 人人 新浪 木瓜移动 笔试
- 编写热血江湖模拟按键外挂
- 省选+NOI 第九部分 博弈论
- 尚学堂高淇python课件代码_尚学堂高淇Python400集全套视频教程百度云网盘分享
- RecyclerView或是ListView(列表)点击某个条目保持选中【非常巧妙】
- 老病毒再现新系统--警惕恶意代码死灰复燃,(NTDETECT.EXE,NTDETECT.COM)
- todd li 保留_用Todd Motto对JavaScript进行解密
- 股票交易接口Java Serializable接口实现问题?
- 动态内存的申请和非动态内存的申请_英国:国内双非学生,非相关背景,能申请英国卡迪夫大学计算机硕士课程吗?申请难度大吗?附案例分享...
- 转:绝对论坛元老,05年注册。告诉你一个真实的魅族