自定义滚动条

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

coodingcc

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

阅读量136

点赞数

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

本文链接：https://blog.csdn.net/cristina_song/article/details/83590288

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

滚动条从外观来看是由两部分组成：
1.滑块：可以滑动的部分
2.轨道：即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式主要有三部分组成：
1、::-webkit-scrollbar 定义了滚动条整体的样式；（可以改变滚动条的宽度）
2、::-webkit-scrollbar-thumb 滑块部分；（可以改变滑块的圆角）
3、::-webkit-scrollbar-track 轨道部分。（可以改变轨道的圆角）

<html>
<head></head>
<body>
	<div class="scrollbar">
		<div class="force-overflow"></div>
	</div>
</body>
</html>
<script>
</script>
<style type="text/css">
   .scrollbar {
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
   }
    .force-overflow {
    /*超过总宽度才看得到滚动条*/
    min-height: 450px;
   }
   /*定义了滚动条整体的样式*/
   ::-webkit-scrollbar {
   	    /*滚动条的宽度*/
  		width: 6px;
    }
	/*滑块部分*/
	::-webkit-scrollbar-thumb {
	  background-color: rgba(0, 0, 0, .9);//可以换成图片
	  border-radius: 999px;
	}
    /*轨道部分*/
	::-webkit-scrollbar-track {
	  background-color: rgba(0, 0, 0, .2);
	  border-radius: 999px;
	}
</style>

此外，滚动条的滑块不仅可以填充颜色还可以填充图片：

background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);