css 自定义滚动条

Posted 2021-05-13

$('.content-in-scroll').mCustomScrollbar({
    theme: "custom-theme",
    alwaysShowScrollbar: 2,
    scrollButtons: false,
    autoHideScrollbar: false,
    mouseWheel:{ deltaFactor: 20 },
    callbacks:{
        whileScrolling:function(){
            var scroll = this,
                scrollTop = scroll.mcs.top;
            if (scrollTop <= -90) {
                toTopBtn.addClass('active');
            } else {
                toTopBtn.removeClass('active');
            }
        }
    }
});

.mCSB_scrollTools {
    width: 4px;
}
.mCS-custom-theme.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 4px;
    background-color: #9bbc66;
}
.mCS-custom-theme.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-custom-theme.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-custom-theme.mCSB_scrollTools .mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: #95ab71;
}
.mCS-custom-theme.mCSB_scrollTools .mCSB_draggerRail  {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 4px;
    background-color: #e3e8d9;
}