在iOS下的Safari瀏覽器，默認div、列表、textarea、下拉菜單中的滾動條是不顯示的。用戶往往不知道哪些地方是支持滾動的，所以要強制顯示滾動條。
其實可以用::-webkit-scrollbar偽類來解決這個問題。
先了解一下：
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條里面的滑塊
::-webkit-scrollbar-track 滾動條的軌道
Demo效果如圖：
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div-ul{
background: #ccc;
width: 300px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
/* 滾動條整體部分 */
.div-ul::-webkit-scrollbar{
width: 12px; /* 縱向滾動條寬度 */
height: 12px;/* 橫向滾動條高度 */
background-color: #F5F5F5; /* 滾動條整體背景，一般被覆蓋著 */
}
/* 滾動條里面的滑塊 */
.div-ul::-webkit-scrollbar-thumb{
border-radius: 10px; /* 滾動條滑塊圓角 */
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 滾動條滑塊陰影 */
background-color: #D62929; /* 滾動條滑塊顏色 */
}
/* 滾動條的軌道（里面裝有Thumb） */
.div-ul::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滾動條軌道陰影 */
border-radius: 10px; /* 滾動條軌道圓角 */
background-color: #F5F5F5; /* 滾動條軌道背景 */
}
</style>
</head>
<body>
<div>
<ul class="div-ul">
<li>123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123</li>
<li>234</li>
<li>345</li>
<li>456</li>
<li>567</li>
<li>678</li>
</ul>
</div>
</body>
</html>