swiper.min.js 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>

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

Answer 1

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

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

将以下片段添加到您的css：

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

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

swiper.min.js scrollbar: 强制滚动条

swiper.min.js scrollbar: Force scrollbar

html

javascript

css

scrollbar

swiper