swiperjs实现内容滚动，自定义滚动条

效果图：

html:

<div class="rule_img">
    <div class="swiper-container" id="swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="mask_center_p">
                    <img src="~@/static/images/mask_activityruleone_p.png" alt="">
                </div>
            </div>
        </div>
        <div class="swiper-scrollbar"></div>
    </div>
</div>

js:

new Swiper('#swiper2', {
    //其他设置
    direction: 'vertical',
    roundLengths: true,
    slidesPerView: 'auto',
    freeMode: true,
    scrollbar: {
        el: '.swiper-scrollbar',
        dragSize: 24,
        draggable: true,
        hide: false  //不让滚动条自动隐藏
    },
    mousewheel: true,
});

css:

.rule_img {
    width: 495px;
    height: 985px;
    position: absolute;
    top: 180px;
    left: 51%;
    transform: translateX(-50%);
    .mask_center_p {
        width: 439px;
        height: 1424px;
        margin: 0 auto;
        img {
            width: 439px;
            height: 1424px;
        }
    }
}
.swiper-container {
    width: 495px !important;
    height: 985px !important;
}

//核心代码
.swiper-slide {
    height: auto;
}

//滚动条的条条
.swiper-scrollbar {
    right: 10px;
    top: 0;
    background-color: #f98a19;
}

//滚动条的滑动部分
.swiper-scrollbar-drag {
    width: 25px;
    position: relative;
    background: url('~@/static/images/mask_huadong.png') no-repeat;
    background-size: 100% 100%;
    left: -10px;
    top: 0;
    border-radius: 0;
}

有时加载swiperjs不成功，可在页面加载完之后这样写：

this.$nextTick(() => {
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 7,
    });
});