-webkit-scrollbarを設定する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【CSS】スクロールバーをカスタマイズする</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>さんぷるさいと</h1>
</header>
<p>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ
</body>
</html>
style.css
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background: gainsboro;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background: silver;
border-radius: 8px;
box-shadow: inset 0 0 10px slategray;
}
::-webkit-scrollbar-thumb:hover {
background: gray;
}
この場合、角の丸いスクロールバーが表示される。
