css美化滚动条

最新推荐文章于 2024-09-11 09:01:19 发布

yuhuamei

最新推荐文章于 2024-09-11 09:01:19 发布

阅读量220

点赞数

文章标签： CSS 滚动条样式定制 webkit 滑块

原文链接：https://www.cnblogs.com/xiaomili/p/10522566.html

版权

css代码

.scrollDiv{
			width: 200px;
    		height: 200px;
    		overflow-y: auto;
		}

		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	  .scrollDiv::-webkit-scrollbar{
	    width: 7px;
	    height: 7px;
	    background-color: #F5F5F5;
	  }

	  /*定义滚动条轨道 内阴影+圆角*/
	  .scrollDiv::-webkit-scrollbar-track {
	    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	    border-radius: 10px;
	    background-color: #F5F5F5;
	  }

	  /*定义滑块 内阴影+圆角*/
	  .scrollDiv::-webkit-scrollbar-thumb{
	    border-radius: 10px;
	    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	    background-color: #c8c8c8;
	  }

html代码

<div class="scrollDiv">
	测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>