一.什么是滚动穿透
有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
二.解决电脑端长按鼠标拖拽滚动，即手机端的触屏滑屏滚动穿透问题
重要代码：
@touchmove.stop.prevent="() => {}"// 在父级元素添加重写滚动事件 @touchmove.stop.prevent="() => { }"
<view class="list" @touchmove.stop.prevent="() => { }">
<uni-data-picker placeholder="请选择项目" popup-title="请选择所属项目" :localdata="items" v-model="classes" @change="onchange"></uni-data-picker>
</view>
如果添加这个成功以后，后面的操作就不需要再看了。
三.官网给出的禁止滚动穿透
使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
但由于平台自身原因，除了h5平台外 ，其他平台都不能在在组件内禁止滚动穿透，所以在微信小程序、App 平台，页面内需要用户特殊处理一下
在 微信小程序/App 平台可使用 page-meta 组件动态修改页面样式 ，
需要在 data 中定义一个变量，用来表示 uni-popup 的开启关闭状态，并通过这个变量修改 page-meta 的 overflow 属性。
在 uni-popup 的 @change 事件中可以接受到 uni-popup 的开启关闭状态 ，并赋值给上面的变量
下面是关键代码片段：
<template>
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
<view class="container">
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff" @change="change">
<!-- ... -->
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
show:false
}
},
methods: {
change(e) {
this.show = e.show
}
}
}
</script>
Tips
- wx、app 需要 使用 page-meta 组件配合阻止滚动穿透
- 注意 page-meta 组件，一个页面只能存在一个
- 其他平台无法阻止滚动穿透，建议使用 scroll-view 滚动 ，手动设置 overflow:hidden,同 page-meta 方法一致
四. overscroll-behavior
默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
在某些情况下我们不想要这些表现，使用 overscroll-behavior 来去除不需要的滚动链。
语法：
overscroll-behavior 属性可以使用下面列表中的一或两个关键字指定。
使用两个关键字来指定 overscroll-behavior 分别在 x 和 y 轴的值。只用一个值的话，x 和 y 轴都被指定为该值。
| 值 | 效果 |
| auto | 默认效果 |
| contain | 设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。 |
| none | 临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。 |
这段代码需要加在最外层的父级元素上面：
/deep/ .container {
// 在真正的滚动区域设置 阻断滚动穿透
overscroll-behavior-y: contain !important;
}五.电脑端的鼠标滚轮滚动穿透
因为弹窗和弹窗的遮罩层（阴影层）没有阻止电脑端的鼠标滚轮滚动的操作，所以就导致了还存在鼠标滚轮滚动穿透。
重要代码：
@mousewheel.prevent想保留自己的scrollview区域的鼠标滚动，就要在非scrollview的地方加阻断滚轮事件的操作。
参考了这位博主写的博客 ---- > 指路：uniapp 微信小程序和H5的弹窗滚动穿透解决
又发现一篇解决滚动穿透很详细得到文章 ---> 指路：这一次，彻底解决滚动穿透
如有侵权请联系我删除。