web関連

【HTMLCSS】スマホ時にスクロールバー出したい

【HTMLCSS】スマホ時にスクロールバー出したい

「overflow-x:scroll;」とか指定して横スクロールできるように組んだけどスマホ時にスクロールバーがでなくてスクロールできるんだかわかんなかったからcssでスクロールバーを作った時の備忘録

HTMLのコード

<div class="item_table">
	<table>
(省略)…
	</table>
</div>

tableのところは任意で替えてね

CSSのコード

.item_table {
  margin-bottom: 20px;
  overflow-x: scroll;
}
/*スクロールバー全体の高さ指定*/
.item_table::-webkit-scrollbar {
  height: 4px;
}
/*スクロールバーの動く部分(つまみの部分)指定*/
.item_table::-webkit-scrollbar-thumb {
  background-color: #666666;
  border-radius: 100px;
}
/*スクロールバーの後ろの背景指定*/
.item_table::-webkit-scrollbar-track {
  border-radius: 100px;
  background-color: #ccc;
}
.item_table table {
  width: 800px;
}

コピペで動くはず