页面内滚动条样式修改

有时候页面内需要内容框超出部分显示滚动条，但是嫌滚动条的默认样式太丑，我们可以通过修改CSS样式来美化达到像苹果手机一样的滚动条；下面就来介绍一下

首先html页面如下,

<ul>
  <li>123213</li>
  <li>123213</li>
  <li>123213</li>
  <li>123213</li>
  <li>123213</li>
</ul>

基本的显示y轴滚动条

ul{
height:100px;
overflow-y:auto;
}

滚动条样式修改

ul::-webkit-scrollbar {
    width: 8px;
}
ul::-webkit-scrollbar-thumb {
    background-color: #bdbdbd;
    border-radius: 5px;
}
ul::-webkit-scrollbar-track {
    background-color: #fff;
}

最后的效果如下

如果想修改更多样式自己琢磨