滚动穿透与滚动溢出

时间:?2021-09-14阅读:?66标签:?滚动

滚动穿透

在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起滚动,看起来好像事件穿透到下面的DOM元素上一样,我们姑且称之为滚动穿透。

问题原因

能够猜想是文档(document)的滚动事件被触发了,如果能禁用滚动事件就好办了。

案例伪代码

<div class="btn">点击出现弹窗</div>

<div class="popup">
  <div class="popup-mask"></div>
  <div class="popup-body popup-bottom">
    <div class="header">我是标题</div>
    <div class="content">
      <div>0</div>        
      <div>1</div>
      <div>...</div>
    </div>
  </div>
</div>
.popup-mask {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 998;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.popup-body {
  padding: 0 50px 40px;
  background-color: #fff;
  position: fixed;
  z-index: 999;
}

解决方案A (touch-action)

默认情况下,平移(滚动)和缩放手势由浏览器专门处理,但是可以通过 css 特性 touch-action 来改变触摸手势的行为。摘取几个 touch-action 的值如下。

描述
auto启用浏览器处理所有平移和缩放手势。
none禁用浏览器处理所有平移和缩放手势。
manipulation启用平移和缩放手势,但禁用其他非标准手势,例如双击缩放。
pinch-zoom启用页面的多指平移和缩放。

于是在 popup 元素上设置该属性,禁用元素(及其不可滚动的后代)上的所有手势就可以解决该问题了。

.popup {
  touch-action: none;
}

Note: [无障碍设计] 阻止页面缩放可能会影响视力不佳的人阅读和理解页面内容,不过小程序本身好像就不可以缩放!

解决方案B (event.preventDefault)

来自 W3C 的一个标准。大意是说,在 touchstart 和 touchmove 事件中调用 preventDefault 方法可以阻止任何关联事件的默认行为,包括鼠标事件和滚动。

因此我们可以这样处理。
Step 1,监听弹窗最外层元素(popup)的 touchmove 事件并阻止默认行为来禁用所有滚动(包括弹窗内部的滚动元素)。
Step 2,释放弹窗内的滚动元素,允许其滚动:同样监听 touchmove 事件,但是阻止该滚动元素的冒泡行为(stopPropagation),使得在滚动的时候最外层元素(popup)无法接收到 touchmove 事件。

const popup = document.querySelector('.popup')
const scrollBox = document.querySelector('.content')

popup.addEventListener('touchmove', (e) => {
  // Step 1: 阻止默认事件
  e.preventDefault()
})

scrollBox.addEventListener('touchmove', (e) => {
  // Step 2: 阻止冒泡
  e.stopPropagation()
})


滚动溢出

如上录屏所示,弹窗内也含有滚动元素,在滚动元素滚到底部或顶部时,再往下或往上滚动,也会触发页面的滚动,这种现象称之为滚动链(scroll chaining), 但是感觉滚动溢出(overscroll)这个名字更言辞达意。

解决方案A (overscroll-behavior)

overscroll-behavior 是 css 的一个特性,允许控制浏览器滚动到边界的表现,它有如下几个值。

描述
auto默认效果,元素的滚动可以传播到祖先元素。
contain阻止滚动链,滚动不会传播到祖先元素,但是会显示节点自身的局部效果。例如 Android 上过度滚动的发光效果或 iOS 上的橡皮筋效果。
none与 contain 相同,但是会阻止自身的过度效果。

所以可以这样解决问题:

.content {
  overscroll-behavior: none;
}

简洁干净高性能,不过 Safari 全系不支持,兼容性如下,有没有感觉 Safari 就是现代版的 IE(偶然听路人说的)!

解决方案B (event.preventDefault)

借用 event.preventDefault 的能力,当组件滚动到底部或顶部时,通过调用 event.preventDefault 阻止所有滚动,从而页面滚动也不会触发了,而在滚动之间则不做处理。

let initialPageY = 0

scrollBox.addEventListener('touchstart', (e) => {
    initialPageY = e.changedTouches[0].pageY
})

scrollBox.addEventListener('touchmove', (e) => {
    const deltaY = e.changedTouches[0].pageY - initialPageY
    
    // 禁止向上滚动溢出
    if (e.cancelable && deltaY > 0 && scrollBox.scrollTop <= 0) {
        e.preventDefault()
    }

    // 禁止向下滚动溢出
    if (
        e.cancelable &&
        deltaY < 0 && 
        scrollBox.scrollTop + scrollBox.clientHeight >= scrollBox.scrollHeight
    ) {
        e.preventDefault()
    }
})

解决方案完整 Demo

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动穿透与滚动溢出</title>
<style>
body {
padding: 60px;
height: 150vh;
}

.btn {
display: inline-block;
background-color: red;
color: #fff;
border-radius: 8px;
padding: 10px 20px;
margin-bottom: 30px;
}

.popup {
display: none;
/* touch-action: none; */
}

.popup-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}

.popup-body {
position: fixed;
z-index: 999;
padding: 0 50px 40px;
background-color: #fff;
}

.popup-bottom {
left: 0;
right: 0;
bottom: 0;
}

.header {
font-size: 18px;
text-align: center;
line-height: 3;
background-color: blanchedalmond;
}

.content {
max-height: 40vh;
background-color: greenyellow;
overflow: auto;
/* overscroll-behavior: none; */
}
</style>
</head>

<body>
<div class="btn">点击出现弹窗</div>
<div class="page-content">这个页面很高哦</div>

<div class="popup">
<div class="popup-mask"></div>
<div class="popup-body popup-bottom">
<div class="header">我是标题</div>
<div class="content"></div>
</div>
</div>

<script>
const pageContent = document.querySelector('.page-content')
const scrollBox = document.querySelector('.content')
const btn = document.querySelector('.btn')
const popup = document.querySelector('.popup')
const mask = document.querySelector('.popup-mask')

for (let i = 0; i < 30; i++) {
const child = document.createElement('div')
child.textContent = '这个页面很高哦'
pageContent.appendChild(child)
}

for (let i = 0; i < 30; i++) {
const child = document.createElement('div')
child.textContent = i
scrollBox.appendChild(child)
}

btn.addEventListener('click', () => {
popup.style.display = 'block'
})

mask.addEventListener('click', () => {
popup.style.display = 'none'
})

/**
* 滚动穿透
*/
popup.addEventListener('touchmove', (e) => {
e.preventDefault()
})

scrollBox.addEventListener('touchmove', (e) => {
e.stopPropagation()
})

/**
* 滚动溢出
*/
let initialPageY = 0

scrollBox.addEventListener('touchstart', (e) => {
initialPageY = e.changedTouches[0].pageY
})

scrollBox.addEventListener('touchmove', (e) => {
const deltaY = e.changedTouches[0].pageY - initialPageY

// 禁止向上滚动溢出
if (e.cancelable && deltaY > 0 && scrollBox.scrollTop <= 0) {
e.preventDefault()
}

// 禁止向下滚动溢出
if (
e.cancelable &&
deltaY < 0 &&
scrollBox.scrollTop + scrollBox.clientHeight >= scrollBox.scrollHeight
) {
e.preventDefault()
}
})
</script>
</body>

</html>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10673

css隐藏滚动条同时可以滚动

通过 ::-webkit-scrollbar 伪元素; 外层元素 overflow: hidden 内层元素absolute定位;父元素overflow: hidden, 子元素宽度 100% + 滚动条宽度

移动端滚动穿透问题解决方案

移动端有可滚动的弹窗肯定会遇到的问题,滑动弹层背景跟着滚动,如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉,但是如果弹窗内容过多需要滚动那就不可以这样做。以下这个解决办法在线上使用没有问题,可以大胆拿去用

基于iScroll实现内容滚动

iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,还可以实现缩放,拉动刷新,精确捕捉元素,自定义滚动条等功能。

原生JS实现图片滚动

黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像

H5中滚动到底部的事件

在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。可以采用window的滚动事件进行处理,如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的

关于滚动贯穿的解决方案

当前容器已经滚动到底部或者顶部,无法再滚动,容器会默认选择上层容器进行滚动,可以说滚动贯穿并非是一个bug,只是一种现象

overflow滚动条如何隐藏?

隐藏滚动条有很多方法,比较简单和直观的方法可以使用::-webkit-scrollbar来完成,这样的话就把box本身的滚动条隐藏了。如果要兼容 PC 其他浏览器

原生JS实现滚动条

可视内容区的高度 / 内容区的实际高度 = 滚动条的高度 / 滑道的高度;内容区距离顶部的距离 / (内容区的实际高度 - 可视内容区域的高度 ) = 滚动条距离顶部的距离 / ( 滑道的高度 - 滚动条的高度)

background-attachement视差滚动

之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

点击更多...

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu