<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>-webkit-scrollbar</title>
<style>
.container {
height: 150px;
width: 200px;
overflow: auto;
}
.scroll {
height: 100%;
}
.container::-webkit-scrollbar {
width: 7px;
}
.container::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 6px green;
}
.container::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}
</style>
</head>
<body>
<div class="container">
<div class="scroll">
iPhoneX</br>
iPhoneX Max</br>
iPhoneX MaxPro</br>
iPhoneXI</br>
iPhoneXI Max</br>
iPhoneXI MaxPro</br>
iPod</br>
iPad</br>
iPad Pro</br>
iPad Mini</br>
iPad Air</br>
iMac</br>
Mac Mini</br>
MacPro</br>
</div>
</div>
</body>
</html>
上面的代码,在升级iOS13/iPadOS13之前的运行结果如下(运行平台:iPad, OS:iOS12.3)

但是在升级到iOS13/iPadOS13之后,滚动栏却看不到了,运行结果如下(运行平台:iPad,OS:iPadOS13.1)

----------------------------------分割线开始----------------------------------------
(上面的张图片是手动在Mac safari上截的图!!!由于我Mac上safari的版本是12.1.2,代码运行后没有发生滚动栏看不到的问题,所以上面的两张贴图宽度不一致(不要说我不是从iPad上截的图,怕麻烦,只是为了说明问题))
----------------------------------分割线结束----------------------------------------
如图所示,iOS升级后用-webkit-scrollbar自定义的滚动条消失了,当然还是有滚动的功能的!!!
为此我特地在caniuse上查了兼容性问题,完全OK(查询结果如下),此问题我缠绕我两天时间,仍没能解决,望各位大神能解决我的困惑




补充一句,苹果safari13的官方文档,也没有说-webkit-scrollbar不能使用的问题,但是他提到了-webkit-overflow-scrolling: touch被禁用的问题(具体内容如下),我不是很清楚这对-webkit-scrollbar的使用有没有影响???
