Webkit系ブラウザの拡張で、スクロールバーをカスタマイズするCSSの疑似要素に、「::-webkit-scrollbar」というのがあります。
参考:::-webkit-scrollbar – CSS: Cascading Style Sheets | MDN
参考:CSSでスクロールバーをカスタマイズ – Qiita
iPadやiPhoneなど、標準ではスクロールできる要素でも、デフォルトだとスクロールバーがでないので、「::-webkit-scrollbar」の機能を利用してスクロールバーを表示させるということを行っていました。例えば、下記のような感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webkit Scrollbar</title>
<style>
.container{
height:200px;
width:200px;
}
#scroll{
overflow:auto;
font-size:20px;
height:100%;
}
#scroll::-webkit-scrollbar {
width:5px;
}
#scroll::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 6px green;
}
#scroll::-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 id="scroll">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
たちつてと<br>
なにぬねの<br>
はひふへほ<br>
まみむめも<br>
やゆよ<br>
らりるれろ<br>
わをん<br>
</div>
</div>
</body>
</html>
サンプル:Webkit Scrollbar
これを、iOS13にアップする前の端末で見てみると下記のようになります。

青と緑のスクロールバーが表示されてるのが分かると思います。しかし、iOS13にアップデートすると、このスクロールバーのスタイルが無くなってしまいました。

もちろん、スクロール自体はできます(スクロールしている最中は、デフォルトのスクロールバーのスタイルのスクロールが表示されます)。

独自拡張だから無くなっても不思議ではないけど、なぜ無くしたのだろう。

コメント