javascript - swiper.min.js 滚动条 : Force scrollbar

Question

我在 website 中使用了 swiper.min.js .但是，我需要在我网站的右侧显示一个滚动条，因为我的大多数目标受众将使用没有鼠标滚轮的笔记本电脑，他们不可能毫无困难地滚动。

我已经尝试添加以下内容:

<div class="swiper-scrollbar"></div>

并从我的 HTML 文件中如下实例化它:

 <script>
   var swiper = new Swiper('.swiper-container', {
     scrollbar: {
       el: '.swiper-scrollbar',
       hide: true,
     },
   });
 </script>

这些都不起作用。滚动条瞬间出现又瞬间消失。我已经检查了 swiper.min.js 文档，但它不起作用。如何在我的网站上强制使用具有适当滚动功能的滚动条？

Answer 1

这不是预期的解决方案，但它可以解决您的问题。基本上你的 swiper 设置所做的是，它在启动后立即将 overflow:hidden 添加到你的 .swiper-container css 类。

我确信一定有办法防止这种情况发生，但如果您无法弄清楚，这肯定会有所帮助(尽管再次强调，这不是预期的解决方案):

将以下片段添加到您的 CSS 中:

.swiper-container {
     overflow: auto !important;
}

!important 确保滑动器无法通过 JQuery 覆盖它。