CSS でスクロールバーを非表示にする
-
CSS でスクロールバーを非表示にするには、
::-webkit-scrollbar
疑似要素のdisplay
をnone
に設定する -
CSS でスクロールバーを非表示にするには、
scrollbar-width
をnone
に設定する
![CSS でスクロールバーを非表示にする](/img/CSS/feature-image---hide-scrollbar-css.webp)
このチュートリアルでは、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