オリジナルではなく、スクロール バーのスタイルを変更するために CSS3 または CSS+JS から複製されました (すべてのブラウザーと互換性があります)
この記事は、先人の探求に感謝し、個人学習で遭遇した問題の解決策を記録したものにすぎません。
コード部分
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 16px; /*滚动条宽度*/
height: 16px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /*轨道阴影，放进Vue2会提示黄色波浪线，删除-webkit可解决*/
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: red;/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /*轨道阴影，放进Vue2会提示黄色波浪线，删除-webkit可解决*/
background-color: green; /*滚动条的背景颜色*/
}名前の説明
- ::-webkit-scrollbar スクロールバー全体
- ::-webkit-scrollbar-track スクロール バーのトラック (親指が内側にある)
- ::-webkit-scrollbar-thumb スクロールバー内の小さなボックス。上下 (垂直スクロールバーか水平スクロールバーかに応じて左右) に移動できます。
- ::-webkit-scrollbar-button スクロールバーのトラックの両端にあるボタン。クリックすることで小さなボックスの位置を微調整できます。
- ::-webkit-scrollbar-track-piece 内側のトラック、スクロールバーの中央部分 (削除)
- ::-webkit-scrollbar-corner 2 つのスクロールバーが交わるコーナー
- ::-webkit-resizer ドラッグして要素のサイズを変更するための 2 つのスクロールバーの交点にあるギズモ
上記のスタイルは Google Chrome で有効です。(Firefox には対応していません)