禁止弹窗中蒙层底部页面跟随滚动的几种方法

2023-09-19 21:27:05 219

场景概述

众所周知，弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。

那么，如何阻止呢？请看以下分析：

方案分析

方案一

打开蒙层时，给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{ margin:0; padding:20px; } .btn{ border:none; outline:none; font-size:inherit; border-radius:4px; padding:1em; width:100%; margin:1em0; 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; }

constbtnNode=document.querySelector('.btn') constcontainerNode=document.querySelector('.container') constlayerNode=document.querySelector('.layer') constcontentNode=document.querySelector('.content') letstartY=0//记录开始滑动的坐标，用于判断滑动方向 letstatus=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 lett=e.target||e.srcElement letpy=e.targetTouches[0].pageY letch=t.clientHeight//内容可视高度 letsh=t.scrollHeight//内容滚动高度 letst=t.scrollTop//当前滚动高度 //已经到头部尽头了还要向上滑动，阻止它 if(st===0&&startYpy){ e.preventDefault() } },false) contentNode.addEventListener('touchend',e=>{ status=0 },false)

letbodyEl=document.body lettop=0 functionstopBodyScroll(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 } }

禁止弹窗中蒙层底部页面跟随滚动的几种方法

热门推荐

随机推荐