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 is
Scrollable = false;
scrollableElements
.forEach(el => {
if (el
.contains(target)) {
is
Scrollable = true;
}
});
if (is
Scrollable && 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 插件模拟局部滚动效果。相比 i
Scroll，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]。
---
###
本文解析了CSS中overflow:scroll与overflow:auto的区别。当内容未超出容器时，auto隐藏滚动条，而scroll始终显示滚动条但禁用它。推荐使用auto以保持界面整洁。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
