自定义滚动条的样式

最新推荐文章于 2025-06-18 13:54:19 发布

润清

最新推荐文章于 2025-06-18 13:54:19 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

分类专栏：前端业务实际问题文章标签： css 滚动条自定义 iView table

本文链接：https://blog.youkuaiyun.com/qq_39852145/article/details/84617475

前端业务实际问题专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何在iView的表格容器中应用自定义滚动条样式，包括整体样式、滚动条内部小方块及轨道的设计，通过具体代码实现美观且符合需求的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="wrapper">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Nulla vitae modi rerum natus numquam id ut harum aperiam. 
        Aliquid illo ad eaque dolores quibusdam quaerat dolorum, 
        consequuntur maiores odio sint?
    </div>
</div>

<style>
    .wrapper {
        width:100px;
        height: 100px;
        overflow-y: scroll; /* 溢出部分滚动条展示 */
    }
    .content {
        width:100px;
        height: 1000px;
        background-color: cornflowerblue;
    }
    /*滚动条整体样式*/
    .wrapper::-webkit-scrollbar {
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
    }
    /*滚动条里面小方块*/
    .wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    height: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(180,180,180,0.2);
    }
    /*滚动条里面轨道*/
    .wrapper::-webkit-scrollbar-track {
    border-radius: 0;
    }
</style>

给iView的表格的容器使用自定义滚动条

<div class="tableWrapper">
	<Table :columns="columns1" :data="dataOfTable"></Table>
</div>

<style scoped>
	/*滚动条整体样式*/
    .tableStyle::-webkit-scrollbar, .ivu-table-overflowY::-webkit-scrollbar{
	    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
	    height: 4px;
	}
	/*滚动条里面小方块*/
    .tableStyle::-webkit-scrollbar-thumb, .ivu-table-overflowY::-webkit-scrollbar-thumb{
	    border-radius: 5px;
	    height: 5px;
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    background: rgba(180,180,180,0.2);
	}
	/*滚动条里面轨道*/
    .tableStyle::-webkit-scrollbar-track , .ivu-table-overflowY::-webkit-scrollbar-track{
	    border-radius: 0;
	}
</style>