css 自定义滚动条样式

最新推荐文章于 2023-02-20 14:54:13 发布

woowen！

最新推荐文章于 2023-02-20 14:54:13 发布

阅读量530

点赞数

分类专栏： css 文章标签： css 滚动条

本文链接：https://blog.csdn.net/q1ngqingsky/article/details/120287057

版权

当内容超出容器，滚动条出现时，有时需要符合审美需求。通过CSS的`-webkit-scrollbar`伪元素，我们可以自定义滚动条的样式，包括可滑动的部分。了解更多关于CSS3滚动条自定义的方法，提升网页界面的美观度。

摘要由CSDN通过智能技术生成

<div class="content-wrap">
    <div>
        内容XXXX
    </div>

</div>


<style>

// content-wrap样式
.content-wrap {
    flex: 1;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 10px 0;

    &.content-wrap {
        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        -ms-overflow-style: none;
        /*火狐下隐藏滚动条*/
        overflow: -moz-scrollbars-none;
    }

    &.content-wrap::-webkit-scrollbar {
        width: 20px;  // 控制滚动条宽度
        //width: 0;
        height: auto;
    }

    &.content-wrap::-webkit-scrollbar-track {
        background: rgb(221, 16, 16); // 控制滚动条背景颜色
        //background: rgb(239, 239, 239)
        border-radius: 4px;
    }

    &.content-wrap::-webkit-scrollbar-thumb {
        background: #bfbfbf; // 控制滚动条颜色
        border-radius: 10px;
    }

    &.content-wrap::-webkit-scrollbar-thumb:hover { // 鼠标移入滚动条时的颜色变化
        background: #888;