在iOS下的Safari电脑浏览器，默认div、列表、textarea、下拉列表中的滚动条是无法显示的。用户往往不清楚什么地方是支持滚动的，所以要强制显示滚动条。
在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 >
li /li
li 234 /li
li 345 /li
li 456 /li
li 567 /li
li 678 /li
/ul
/div
/body
/html
