禁止弹窗中蒙层底部页面跟随滚动的几种方法
场景概述
众所周知，弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。
那么，如何阻止呢？请看以下分析：
方案分析
方案一
打开蒙层时，给body添加样式：
overflow: hidden; height: 100%;
在某些机型下，你可能还需要给根节点添加样式：
overflow: hidden;
关闭蒙层时，移除以上样式。
优点：
简单方便，只需添加css样式，没有复杂的逻辑。
缺点：
兼容性不好，适用于pc，移动端就尴尬了。
部分安卓机型以及safari中，无法无法阻止底部页面滚动。
如果需要应用于移动端，那么你可能需要方案二。
方案二
就是利用移动端的touch事件
Touch对象代表一个触点，可以通过event.touches[0]获取，每个触点包含位置，大小，形状，压力大小，和目标 element属性。
{
screenX: 511,
screenY: 400,//触点相对于屏幕左边沿的Y坐标
clientX: 244.37899780273438,
clientY: 189.3820037841797,//相对于可视区域
pageX: 244.37,
pageY: 189.37,//相对于HTML文档顶部，当页面有滚动的时候与clientX=Y 不等
force: 1,//压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
identifier: 1036403715,//一次触摸动作的唯一标识符
radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
radiusY: 37.565673828125,
rotationAngle: 0,//它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面
target: {} // 此次触摸事件的目标element
}
利用移动端的touch事件来阻止默认行为（这里可以理解为页面滚动就是默认行为）。
// node为蒙层容器dom节点
node.addEventListener('touchstart', e => {
e.preventDefault()
}, false)
简单粗暴，滚动时底部页面也无法动弹了。假如你的蒙层内容不会有滚动条，那么上述方法prefect。
但是，最怕空气突然安静，假如蒙层内容有滚动条的话，那么它再也无法动弹了。因此我们需要写一些js逻辑来判断要不要阻止默认行为，复杂程度明显增加。
具体思路：判定蒙层内容是否滚动到尽头，是则阻止默认行为，反之任它横行。
Tip：这里我发现了一个小技巧，可以省略不少代码。在一次滑动中，若蒙层内容可以滚动，则蒙层内容滚动，过程中即使蒙层内容已滚至尽头，只要不松手（可以理解为touchend事件触发前），继续滑动时页面内容不会滚动，此时若松手再继续滚动，则页面内容会滚动。利用这一个小技巧，我们可以精简优化我们的代码逻辑。
示例代码如下：
<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 = 1
startY = e.targetTouches[0].pageY
}, false)
contentNode.addEventListener('touchmove', e => {
// 判定一次就够了
if (status !== 1) return
status = 2
let t = e.target || e.srcElement
let py = e.targetTouches[0].pageY
let 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），这样它就无法滚动了，当蒙层关闭时再释放。
position: fixed应该不用对大家过多介绍了吧，详细的介绍大家可以参考这篇文章：http://www.jb51.net/article/83175.htm
当然还有一些细节要考虑，将页面固定视窗后，内容会回头最顶端，这里我们需要记录一下，同步top值。
示例代码：
let bodyEl = document.body
let top = 0
function stopBodyScroll (isFixed) {
if (isFixed) {
top = window.scrollY
bodyEl.style.position = 'fixed'
bodyEl.style.top = -top + 'px'
} else {
bodyEl.style.position = ''
bodyEl.style.top = ''
window.scrollTo(0, top) // 回到原先的top
}
}
思考总结
- 若应用场景是pc，推荐方案一，真的是不要太方便
- 若应用场景是h5，你可以采用方案二，但是我建议你采用方案三
- 若应用场景是全平台，那么方案三你不容错过
本文到这里也即将结束了，在这里我强烈推荐一下方案三，原因在于简单、方便、兼容性好，一次封装，永久受用。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下
-
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*
-
javascript用DIV模拟弹出窗口_窗体滚动跟随
可滚动跟随弹出框效果代码--我们 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; return {top:
-
Android 新手引导蒙层效果实现代码示例
先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLayout比较方便),然后把这个linearlayout的背景设置成#88000000,之后就是给这个linearlayout动态增加子view,初步效果就能达到. 下面直接上代码: public void showGuideView() { View view = getWindow().getDe
-
利用jquery禁止外层滚动条的滚动
前言 通常情况下,当内部滚动条滚动到两端时,再接着滚动时外层的滚动条就会跟着滚动:可是有时我们希望用户只能滚动当前区域,而不触发外层(window)的滚动条,离开当前区域后,才能滚动外层的滚动条.因为用户可能一不小心滚动的幅度过大了,导致当前区域离开可视区域. 在jquery中,滚动事件是scroll,而这个事件是不能阻止冒泡和阻止默认事件的.假如我们设定要禁止window的滚动条,我采取的策略是:当鼠标进入到当前区域后,则window的滚动条的高度始终是鼠标进入前的高度 如下的代码: <sty
-
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
最近在忙于jquery的前端开发,学习到很多知识,今天小编给大家带来一段代码片段有关弹出层后禁用滚动条的代码. 具体代码如下所示: $("cli-open").click(function(){ var scrollTop = document.body.scrollTop;//保存点击前滚动条的位置 window.onscroll=function(){ document.body.scrollTop = scrollTop;//赋值给滚动条的位置 } }) $(".cli
-
弹出遮罩层后禁止滚动效果【实现代码】
方法一: $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二: $("body,.main").height($(window).height()).css({ "overflow-y": "hidden" }); 以上这篇弹出遮罩层后禁止滚动效果[实现代码]就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我
-
禁止弹窗中蒙层底部页面跟随滚动的几种方法
场景概述 众所周知,弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为. 那么,如何阻止呢?请看以下分析: 方案分析 方案一 打开蒙层时,给body添加样式: overflow: hidden; height: 100%; 在某些机型下,你可能还需要给根节点添加样式: overflow: hidden; 关闭蒙层时,移
-
Vue出现弹出层时禁止底部页面跟随滑动
背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用.下面是几种可以解决问题的方式,仅供参考: 1.在有弹出框的页面中,加上以下方法,弹出框出现时调用禁止滚动方法stopScroll(),弹出框去掉是调取允许滚动方法canScroll()即
-
小程序中监听页面滚动的几种方法实例
目录 目录 实现效果 下面是Intersection Observer在MDN上的介绍 IntersectionObserver relativeToViewport 接受参数 Object margins observe(string targetSelector, function callback) 参数 Object res 小程序中监听页面的其他方法 page-meta scroll-view 总结 在工作中我们经常遇到需要监听页面中元素位置,当元素超出显示区域或即将显示到页面上,我们
-
Android Activity中使用Intent实现页面跳转与参数传递的方法
本文实例讲述了Android Activity中使用Intent实现页面跳转与参数传递的方法.分享给大家供大家参考,具体如下: 新建一个FirstAvtivity.java package com.zhuguangwei; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.O
-
js实现页面跳转的五种方法推荐
js实现页面跳转的五种方法推荐 第一种: 复制代码 代码如下: <script language="javascript" type="text/javascript"> window.location.href="xx.jsp?backurl="+window.location.href; </script> 第二种: 复制代码 代码如下: <script language="javascript&quo
-
javascript实现html页面之间参数传递的四种方法实例分析
本文实例讲述了javascript实现html页面之间参数传递的四种方法.分享给大家供大家参考,具体如下: 我们知道,在服务器端asp,jsp等程序可以接受html页面上的form传来的参数.那么,可不可以传递参数给html页面呢.可以. 原理:通过window.location.href中的分割符获得各个参数 方法一: /* *函数功能:从href获得参数 *sHref: http://www.cscenter.com.cn/arg.htm?arg1=d&arg2=re *sArgName:a
-
uni-app如何页面传参数的几种方法总结
uni.$emit(eventName,OBJECT) 触发全局的自定事件.附加参数都会传给监听器回调. 其中eventName为事件名,OBJECT为触发事件附加参数 示例代码如下: uni.$emit('update',{msg:'页面更新'}) uni.$on(eventName,callback) 监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数. eventName为事件名,callback为事件的回调函数. 示例代码如下: uni.$on('updat
-
C# 中Excel导入时判断是否被占用三种方法
C# 中Excel导入时 判断是否被占用三种方法 Excel导入时 判断是否被占用,三种方法: 1:Win7可以,WIN10不可以 try { //原理,如果文件可以被移动,说明未被占用 string strPath = "C:\\123OK.Excel"; string strPath2 = "C:\\123OK22.Excel"; File.Move(strPath, strPath2); File.Move(strPath2, strPath); } catc
-
Linux 中清空或删除大文件内容的五种方法
在 Linux 终端下处理文件时,有时我们想直接清空文件的内容但又不必使用任何Linux命令行编辑器 去打开这些文件.那怎样才能达到这个目的呢?在这篇文章中,我们将介绍几种借助一些实用的命令来清空文件内容的方法. 注意: 由于再Linux中一切皆文件,你需要时刻注意,确保你将要清空的文件不是重要的用户文件或者系统文件.清空重要的系统文件或者配置文件可能会引发严重的应用失败或者系统错误. 提示:在下面的示例中,我们将使用名为 access.log 的文件来作为示例样本. 1. 通过重定向到 Nul
-
Js删除数组中某一项或几项的几种方法(推荐)
1.js中的splice方法 splice(index,len,[item]) 注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标 len: 替换/删除的长度 item:替换的值,删除操作的话 item为空 如:arr = ['a','b','c','d'] 删除 ---- item不设置 arr.splice(1,1) //['a','c','d'] 删除起始下