スクロールバー

スクロールバーへのスタイルの指定は、ブラウザによって異なります。

名称

  部位
つまみ (thumb) スクロールバーの動く部分
トラック (track) スクロールバーの背景
矢印ボタン (scroll arrow) スクロールバーの両端にあるボタン

Trident

  • -ms-scrollbar-3dlight-color
  • scrollbar-arrow-color
  • scrollbar-base-color
  • -ms-scrollbar-darkshadow-color
  • scrollbar-face-color
  • scrollbar-highlight-color
  • -ms-scrollbar-shadow-color
  • scrollbar-track-color
scrollbar-arrow-color:red
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
対応するブラウザでなければ、スタイルは適用されません。
scrollbar-arrow-color property (Internet Explorer) | MSDN
scrollbar-base-color:red
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
対応するブラウザでなければ、スタイルは適用されません。
scrollbar-base-color property (Internet Explorer) | MSDN

参考

参考書

WebKit

::-webkit-scrollbar {
    width: 20px;
}
::-webkit-scrollbar-track {
    border: 1px red solid;
}
::-webkit-scrollbar-thumb {
    background-color: green;
}
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
対応するブラウザでなければ、スタイルは適用されません。

Gecko

scrollbar-color: green red
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
対応するブラウザでなければ、スタイルは適用されません。
scrollbar-width: thin
  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
対応するブラウザでなければ、スタイルは適用されません。
HTMLの情報サイトから、まとめて検索