Swiper 中子元素的 `overflow
: scroll` 样式
失效，主要是由于
Swiper 在启用鼠标滚轮控制（`mousewheel
: true`）时会拦截滚轮事件，从而阻止了内部可滚动区域对这些事件的响应。这种
问题在 Mac 上尤其明显，表现为即使设置了 `overflow
: auto` 或 `overflow
: scroll`，溢出内容也不会显示或无法滚动[^1]。
###
解决方案
#### 启用 `releaseOnEdges` 释放滚轮控制权
Swiper 提供了 `mousewheel.releaseOnEdges` 参数，允许在滑动到边缘时释放滚轮事件的控制权，使浏览器可以继续处理该事件：
```
javascript
const
swiper = new
Swiper(&#
39;.
swiper-container&#
39;, {
direction
: &#
39;horizontal&#
39;,
mousewheel
: {
releaseOnEdges
: true, // 到达边缘时释放滚轮控制
},
});
```
通过这种方式，当用户滑动到最左或最右端时，
Swiper 不再拦截滚轮事件，使得内部具有 `overflow
: scroll` 样式的区域可以正常响应滚动操作。
#### 动态阻止
Swiper 拦截滚动事件
可以通过监听
Swiper 的 `scroll` 事件，并结合 DOM 元素属性判断当前滚轮事件的目标是否为可滚动区域，从而动态决定是否阻止
Swiper 对该事件的拦截：
```
javascript
const
swiper = new
Swiper(&#
39;.
swiper-container&#
39;, {
direction
: &#
39;horizontal&#
39;,
mousewheel
: true,
on
: {
scroll
: function (event) {
const target = event.target || event.srcElement;
const scrollableElements = document.querySelectorAll(&#
39;.scrollable&#
39;);
let isScrollable = false;
scrollableElements.forEach(el => {
if (el.contains(target)) {
isScrollable =
true;
}
});
if (isScrollable && target.scrollLeft >= 0) {
event.preventDefault(); // 阻止
Swiper 拦截滚动
}
},
},
});
```
此方法实现了
Swiper 翻页与内部滚动共存的效果，适用于包含
多个可横向滚动区域的复杂布局场景。
#### 添加 passive 事件监听器优化性能
为了避免“Added non-passive event listener to a scroll-blocking ‘wheel’ event”警告，可以在页面加载前主动注册带有 `{ passive
: true }` 的 `wheel` 事件监听器：
```
javascript
document.addEventListener(&#
39;wheel&#
39;, function () {}, { passive
: true });
```
虽然该方式不会直接影响 `overflow` 属性的显示
问题，但有助于提升整体滚动性能和兼容性。
#### 使用 `-webkit-overflow-scrolling` 提升移动端体验
在 iOS 设备上，为了增强局部滚动的流畅性，建议添加 `-webkit-overflow-scrolling
: touch` 样式：
```
css
.scrollable {
overflow
: auto;
-webkit-overflow-scrolling
: touch;
}
```
需要注意的是，该样式可能会改变 `position
: fixed` 元素的行为，若需要在滚动区域内使用固定定位，可通过特定框架组件（如支付宝小程序的 `<root-portal>`）包裹目标节点来实现兼容性调整[^2]。
#### 替代方案：使用
Swiper 模拟局部滚动
对于某些安卓设备上 `overflow-y
: auto|scroll`
失效的情况，可以考虑使用
Swiper 插件模拟局部滚动效果。相比 iScroll，
Swiper 在兼容性和性能上表现更优，尤其是在复杂的移动端环境中：
```html
<div class="big_box">
<div class="
swiper-container">
<ul class="list
swiper-wrapper">
<li class="
swiper-slide"><a href="#">1.《江山无悔》</a><span class="fr">作者</span></li>
<li class="
swiper-slide"><a href="#">1.《江山无悔》</a><span>作者作者作者作者作者作者作者作者作者</span></li>
<li class="
swiper-slide"><a href="#">1.《江山无悔》</a><span>1625
37
338
38
388
38
38
38</span></li>
<li class="
swiper-slide"><a href="#">1.《江山无悔》</a><span>作者</span></li>
</ul>
</div>
</div>
```
通过
Swiper 实现的局部滚动不仅提升了兼容性，还优化了用户的交互体验[^
3]。
---
###
文章介绍了如何通过在DOM的.touch元素上添加点击事件，使用JavaScript调用mySwiper对象的update方法来实现Swiper滑动组件的动态更新。
扫一扫
2795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
