<!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的使用有沒有影響？？？
uj5u.com熱心網友回復：
好冷清啊，這么久了，都沒有人回復嗎？uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
您解決了嗎，如何解決的
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/56190.html
標籤：iOS