swiper滚动条

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/102756622

html:

<div class="swiper-container">
     <div class="swiper-wrapper">
         <div class="swiper-slide">
		test1
         </div>
     </div>
     <div class="swiper-scrollbar"></div>
</div>

css:

 /* 未选中时的滚动条背景 */
 .lie-list .swiper-scrollbar {
     width: 20%;
     margin-left: 40%;
     background-color: #eee;
 }
 /* 选中状态下的滚动条样式 */
 .lie-list .swiper-scrollbar-drag {
     background-color: #f40;
     width: 50%;
 }

js:

    var swiper = new Swiper('.lie-list .swiper-container', {
        scrollbar: {
            el: '.swiper-scrollbar',
            hide: false,
        },
    });

注：

滚动条样式只有在内容超过容器之后才会显示，如果没有超过则会自动隐藏不回显示在页面上！
滚动条样式只有在内容超过容器之后才会显示，如果没有超过则会自动隐藏不回显示在页面上！
滚动条样式只有在内容超过容器之后才会显示，如果没有超过则会自动隐藏不回显示在页面上！