滚动条相关--样式篇

关于滚动条不得不说的事情

页面中许多地方需要使用到滚动条,但是浏览器自带的滚动条样式已经让产品经理审美疲劳,本篇暂且记录本人项目中使用的滚动条样式修改。
滚动条分为两部分组成:
  1. 可以滑动的部分,我们叫它滑块
  2. 滚动条的轨道,即滑块的轨道
一般来说滑块的颜色比轨道的颜色深。
HTML
<div class="test">
</div>
css
.test{
	width:300px;
	height:800px;
    overflow: hidden;
    overflow-y: auto;
}
//一般的,我们直接设置滚动条整体样式的宽度为0,滚动条就会消失不见。
.test::-webkit-scrollbar {
   width: 0px;
}
//滚动条里面小方块
.test::-webkit-scrollbar-thumb {
    border-radius: 10px;
 	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #ccc;
}
//滚动条里面轨道
.test::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #EDEDED;
}

你可能感兴趣的:(Vue,vue,滚动条)