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

スクロールバーの構成

  • :: - スクロールバーのWebKitの-スクロールバー不可欠
  • :: - 小さなボックス内のWebKit、スクロールバーのサムスクロールバー、(垂直スクロールバーが水平スクロールバーであるかどうかに応じて、左または右に移動)下方に上方に移動することができます
  • :: - (親指が装備されている)、スクロールバーのトラックのWebKitの-スクロールバーのトラック
  • :: - ことができますトラックボタンのWebKit-スクロールバーのボタン、スクロールバーの両端にある小さな四角をクリックして位置を微調整します。
  • :: - WebKitの-スクロールバートラックピース内側軌道スクロールバーの中間部分(除去)
  • :: - webkitの-スクロールバーコーナーエッジ、すなわち、2つのスクロールバーの交点であります
  • :: - webkitの-サイズ変更2つのスクロールバーの角にウィジェットをドラッグすることで、要素の大きさを調整します

-webkit-スクロールバー:移動端末は、スクロールバーをスクロール隠します

::-webkit-scrollbar {/*隐藏滚轮*/
    display: none;
}

アプリケーション

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-track {
	background: #e8e8e8;
	border-radius: 8px;
}
::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 8px;
}
::-webkit-scrollbar-corner {
	background: #e8e8e8;
	border-radius: 8px;
}
::-webkit-scrollbar-resizer {
	background: #e8e8e8;
	border-radius: 8px;
}

おすすめ

転載: blog.csdn.net/luchuanqi67/article/details/90316139