CSSスクロールバースタイル

1.概要

1.1説明

美しくするためにデフォルトのスクロールバースタイルをcssで美化する場合があります

1.2スクロールバーの内容

1.2.1スクロールバーの外観表示

　　　　1.スライド可能なコンテンツ(中間のソリッドコンテンツ)、すなわちスライダ.
　　　　2.スクロールボーダー(レール)、スライダがこの内側をスライドする、すなわちレール

1.2.1スクロールバーのスタイル

:-webkit-scrollbarスクロールバー全体のスタイル

を定義

:-webkit-scrollbar-thumbスライダ部分(スクロールバーの中の小さなブロックで、上/下または左/右に移動可能)

:-webkit-scrollbar-trackレール部分(thumbが内蔵)

 2. コード#コード#

スクロールバーはWindowsとmacに対応

//                         
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
//        +  
::-webkit-scrollbar-thumb{
  border-radius: 1em;
  background-color: rgba(50,50,50,.3);
}
//           +  
::-webkit-scrollbar-track{
  border-radius: 1em;
  background-color: rgba(50,50,50,.1);
}

 
転載先:https://www.cnblogs.com/ajuan/p/11546889.html