29,040
社区成员
发帖
与我相关
我的任务
分享iOS13升级后-webkit-scrollbar自定义的滚动栏看不到？？
<!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的使用有没有影响？？？
...全文
请发表友善的回复…
发表回复
kaifeng8899 2021-01-13
- 打赏
- 举报
请问上面问题楼主解决了吗？
weixin_40876414 2020-11-13
- 打赏
- 举报
同问解决了吗
South123 2020-03-13
- 打赏
- 举报
您解决了吗，如何解决的
Yang_2048 2019-12-31
- 打赏
- 举报
Yang_2048 2019-10-29
- 打赏
- 举报
好冷清啊，这么久了，都没有人回复吗？
