【CSS】ブラウザのスクロールバーを消してもスクロールしたいときの設定

もにか

7年前

WEBサイトの上下左右の幅がブラウザより大きい場合、ブラウザにスクロールバーが表示されてしまいます。

ブラウザのスクロールバーを非表示にするには、CSSで「overflow:hidden;」と設定することでスクロールバーが非表示になります。

上記の設定スクロールバーは消えるには消えますが、「overflow:hidden;」は、はみ出た部分を表示しないようになっているだけなので、ブラウザの表示枠外にコンテンツがあったとしても利用者はコンテンツを表示することが出来ません。

今回はスクロールバーを非表示にして、かつ、スクロールができるようにしたいときの設定方法の記事となります。

Contents

1 CSSコード
2 HTMLコード

CSSコード

body{
	overflow:hidden;
}

.sample {
	top:0px;
	left:0px;
	margin: 0;
	padding: 0;
	height: calc(100% + 17px);
	width: calc(100% + 17px);
	padding-right: 17px;
	padding-bottom: 17px;
	overflow-x: scroll;
	overflow-y: scroll;
	position:absolute;
	background-color:#def;
}

HTMLコード

<body>
<div class="sample">
１２３４５６７８９０．．（横幅がはみ出る分繰り返し）．．．．７８９０<br>
２<br>
３<br>
４<br>
．．．（縦幅がはみ出る分繰り返し）
７<br>
８<br>
９<br>
０<br>
</div>
</body>