页面内滚动条样式修改

有时候页面内需要内容框超出部分显示滚动条，但是嫌滚动条的默认样式太丑，我们可以通过修改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;}

最后的效果如下

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