swiper滚动条

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,
        },
    });

注：

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