自定义滚动条样式

最新推荐文章于 2024-06-20 16:16:46 发布

蜗牛前端

最新推荐文章于 2024-06-20 16:16:46 发布

阅读量117

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_21113235/article/details/85261913

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

.box{
 	::-webkit-scrollbar{
		width: 8px;
		height: 16px;
		// background-color: #f5f5f5 !important;
	}	
	/*定义滑块，内阴影及圆角*/
	::-webkit-scrollbar-thumb{
		/*width: 10px;*/
		height: 20px !important;;
		border-radius: 20px !important;;
		-webkit-box-shadow: inset 0 0 6px #a1a1a2!important;
		background-color: #a1a1a2 !important;
	}
		/*鼠标悬停时滑块效果*/
	  & :hover::-webkit-scrollbar-thumb{
		/*width: 10px;*/
		height: 20px !important;;
		border-radius: 20px !important;;
		-webkit-box-shadow: inset 0 0 6px rgb(90, 90, 90)!important;
		background-color: rgb(90, 90, 90) !important;
	}	
	// 轨道样式
    ::-webkit-scrollbar-track     {
        background:#f1f1f1;
    }    

}

以下为效果图：