解决多个swiper嵌套autoplay: true失效问题

文章介绍了如何通过在DOM的.touch元素上添加点击事件,使用JavaScript调用mySwiper对象的update方法来实现Swiper滑动组件的动态更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

添加一个swiper更新事件即可解决

$('.touch').on('click', function{

mySwiper.update();

});        

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>16253733838388383838</span></li> <li class="swiper-slide"><a href="#">1.《江山无悔》</a><span>作者</span></li> </ul> </div> </div> ``` 通过 Swiper 实现的局部滚动不仅提升了兼容性,还优化了用户的交互体验[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值