Swiper 中子元素的 `overflow
: scroll` 样式
失效，主要是由于
Swiper 在启用鼠标滚轮控制（`mousewheel
: true`）时会拦截滚轮事件，从而阻止了内部可滚动区域对这些事件的响应。这种
问题在 Mac 上尤其明显，表现为即使设置了 `overflow
: auto` 或 `overflow
: scroll`，溢出内容也不会显示或无法滚动[^1]。
###
解决方案
#### 启用 `releaseOnEdges` 释放滚轮控制权
Swiper 提供了 `mousewheel.releaseOnEdges` 参数，允许在
滑动到边缘时释放滚轮事件的控制权，使浏览器可以继续处理该事件：
```javascript
const
swiper = new
Swiper('.
swiper-container', {
direction
: 'horizontal',
mousewheel
: {
releaseOnEdges
: true, // 到达边缘时释放滚轮控制
},
}
);
```
通过这种方式，当用户
滑动到最左或最右端时，
Swiper 不再拦截滚轮事件，使得内部具有 `overflow
: scroll` 样式的区域可以正常响应滚动操作。
####
动态阻止
Swiper 拦截滚动事件
可以通过监听
Swiper 的 `scroll` 事件，并结合 DOM 元素属性判断当前滚轮事件的目标是否为可滚动区域，从而
动态决定是否阻止
Swiper 对该事件的拦截：
```javascript
const
swiper = new
Swiper('.
swiper-container', {
direction
: 'horizontal',
mousewheel
: true,
on
: {
scroll
: function
(event
) {
const target = event.target || event.srcElement;
const scrollableElements = document.querySelectorAll
('.scrollable'
);
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
('wheel', 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>16253733838388383838</span></li>
<li class="
swiper-slide"><a href="#">1.《江山无悔》</a><span>作者</span></li>
</ul>
</div>
</div>
```
通过
Swiper 实现的局部滚动不仅提升了兼容性，还优化了用户的交互体验[^3]。
---
###
最低0.47元/天 解锁文章
扫一扫
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
