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

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

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

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

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

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">
1234567890..(横幅がはみ出る分繰り返し)....7890<br>
2<br>
3<br>
4<br>
...(縦幅がはみ出る分繰り返し)
7<br>
8<br>
9<br>
0<br>
</div>
</body>

スポンサーリンク

フォローする

スポンサーリンク