CSS_スクロールバースタイルを設定する方法左右を超えてスクロール

CSS-インタフェーススクロール時にスクロールバーを表示しない

スクロールバーのスタイルを設定するには、次の手順に従います.

div::-webkit-scrollbar {
  width: 0;
}

概要:-webkit-scrollbar

::-webkit-scrollbar CSS擬似クラスセレクタは、要素のスクロールバーのスタイルに影響します.
::-webkit-scrollbarはWebKitをサポートするブラウザ(例えば、Google Chrome、アップルSafari)だけで使用できます.

CSSスクロールバーセレクタ

次の擬似要素セレクタを使用して、さまざまなWeb kitブラウザのスクロールバースタイルを変更できます::-webkit-scrollbar-スクロールバー全体:-Webkit-scrollbar-button-スクロールバーのボタン(上下矢印).:-Webkit-scrollbar-thumb-スクロールバーのスクロールスライダ.:-Webkit-scrollbar-track-スクロールトラック.:-Webkit-scrollbar-track-piece-スクロールバースライダのないレール部分.:-Webkit-scrollbar-corner-垂直スクロールバーと水平スクロールバーが同時にある場合に交差する部分.:-Webkit-resizer-一部の要素のcorner部分の一部のスタイル(例:textareaのドラッグ可能ボタン).

構文

::-webkit-scrollbar { styles here }

例

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
}

左右を超えてスクロール

最初のステップulでのcss設定

#list { 
	overflow-x: auto; //  x     
	list-style: none;//  li     
	white-space:nowrap;//      
	width: auto;(  ) 
	}

第2ステップliでのcss設定

.item { 
	margin-left: 20px; //  li     20px 
	display: inline-block; //    li           float:left     float             
	}