修改滚动条样式

通过css修改滚动条颜色

当前只在chrome浏览器可以看到效果,如果不加body,浏览器默认的滚动条颜色也会变;

body ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

body ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    background-image: linear-gradient(92deg, #8a54be, #c560ef);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

body ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(138, 84, 190, 0.4);
}

js修改滚动条样式

jquery.mCustomScrollbar.concat.min.js

$(window).on("load",function(){

    $(".scroll-area").mCustomScrollbar({
        set_width:false,
        set_height:false,
        scrollInertia:550,
        scrollEasing:"easeOutCirc",
        autoDraggerLength:true,
        scrollButtons:{
            enable:false,
            scrollType:"continuous",
            scrollSpeed:20,
            scrollAmount:40
        },
    });

});

788 total views, 2 views today

Revisions

There are no revisions for this post.

No comments yet.

发表评论