CSS でスクロールバーを非表示にする
-
CSS でスクロールバーを非表示にするには、
::-webkit-scrollbar疑似要素のdisplayをnoneに設定する -
CSS でスクロールバーを非表示にするには、
scrollbar-widthをnoneに設定する
このチュートリアルでは、Web ページをスクロールしながら、Web ページのスクロールバーを非表示にするいくつかの方法を紹介します。
CSS でスクロールバーを非表示にするには、::-webkit-scrollbar 疑似要素の display を none に設定する
::-webkit-scrollbar 疑似要素セレクターを使用して、CSS で要素のスクロールバーのスタイルを設定できます。ただし、このセレクターは、Chrome、Opera、Safari、Edge などの Webkit ベースのブラウザーでのみ使用できます。::-webkit-scrollbar 疑似要素を使用して、Web ページのスクロールバー全体を選択して設定できます。display プロパティを none に変更します。長いウェブページをスクロールすることはできますが、スクロールバーは非表示になります。
たとえば、PHP ファイルを作成し、そのファイルに基本的な HTML 構造を記述します。body セクション内で、PHP タグ <?php を開き、$text 変数にテキスト Hello World を記述します。変数を 100 回ループし、テキストを表示します。CSS では、::-webkit-scrollbar 疑似要素を使用してスクロールバーを選択します。次に、display プロパティを none に設定します。
上記の例では、PHP を使用してテキストを 100 回ループし、Web ページが長くなって Web ページをスクロールできるようにしました。PHP コードにより、テキスト Hello World が新しい行に 100 回出力されます。display プロパティを none に設定すると、スクロールバーが非表示になり、ページをスクロールできるようになります。したがって、非表示のスクロールバー機能を実現できます。
サンプルコード：
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
::-webkit-scrollbar {
display: none;
}
CSS でスクロールバーを非表示にするには、scrollbar-width を none に設定する
scrollbar-width プロパティを使用して none に設定すると、CSS でスクロールバーを非表示にできます。Web ページからスクロールバーを非表示にします。もう 1つのオプションである auto はデフォルトのスクロールバーを設定し、オプション thin はブラウザに応じてスクロールバーを薄く見せます。ただし、このプロパティは Firefox ブラウザでのみ機能します。overflow-y プロパティを使用して、スクロール機能がコンテンツをクリッピングし続けるようにします。これは、ブロックレベルの要素が上部とボタンの端でオーバーフローしたときに機能します。最初の方法と同じ PHP スクリプトを使用して、スクロールバーの無効化を示すことができます。
たとえば、クラス container で div を作成します。div 内で、最初のメソッドのようにテキストをループします。CSS で、コンテナに幅と高さとともに背景色を指定します。scrollbar-width プロパティを none に設定し、overflow-y プロパティを scroll に設定します。
以下の例では、scrollbar-width を none に設定するとスクロールバーが非表示になり、overflow-y を scroll に設定するとスクロール機能が維持されます。このようにして、スクロールバーを非表示にして長いページをスクロールできます。
サンプルコード：
<body>
<div class="container">
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
}
?>
</div>
</body>
.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn