スクロールバーを削除するCSS-フロントエンドQ&A-php.cn

スクロールバーを削除するCSS

PHPz

リリース： 2023-05-27 09:10:07

オリジナル

1048 人が閲覧しました

Web デザインでは、スクロールバーは一般的な Web 要素の 1 つです。一部の Web サイトをデザインする場合、美観やデザインのニーズに合わせてページ内でカスタマイズされたスクロールバーが使用されます。ただし、小さな画面のデバイスで画像を表示したりコンテンツを読んだりする場合など、シナリオによってはスクロールバーを削除する必要がある場合があります。次にCSSを使ってスクロールバーを消す方法を紹介します。

スクロールバーを削除する方法を理解する前に、Web ページ上のスクロールバーのスタイルは通常、ブラウザーのデフォルトスタイルでレンダリングされることを理解する必要があります。したがって、ブラウザによって表示されるスクロールバーを制御するには、CSS スタイルシートでスタイルを設定する必要があります。

スクロールバーを非表示にする

overflow 属性を使用してスクロールバーを非表示にできます。まず、垂直スクロールバーを非表示にするために overflow を hidden に設定します。一方、水平スクロールバーは overflow-x: hidden; に設定する必要があります。

body {
  overflow: hidden; /* 隐藏垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
}

ログイン後にコピー

カスタムスクロールバースタイル

さらに、カスタムスタイルのスクロールバーを追加する必要がある場合は、::-webkit-scrollbar# を使用できます。 # # 疑似要素。この疑似要素を使用すると、スクロールバーのスタイルと外観を制御できます。 ::-webkit-scrollbar-thumb 擬似要素と ::-webkit-scrollbar-track 擬似要素を組み合わせて、カスタムスタイルを実装できます。

/* 自定义垂直滚动条 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滚动条滑块颜色 */
}

::-webkit-scrollbar-track {
  background-color: #fff; /* 设置滚动轨道颜色 */
}

ログイン後にコピー

CSS でスタイルを設定してもスクロールバーを完全に制御できない場合があります。たとえば、iOS では、Safari ブラウザが独自のスクロールバーを使用するため、CSS を介してスタイルを設定して制御することはできません。したがって、JavaScript を使用してカスタムスクロールバーを実装することができます。

具体的な実装については、Mac OS のスクロールバーと同様の効果を実現できる [SimpleBar](https://github.com/Grsmto/simplebar) ライブラリを参照してください。使用する前に、SimpleBar ライブラリの JavaScript ファイルと CSS ファイルをインポートし、クラス名

simplebar-content を持つ要素を HTML に追加する必要があります。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>使用 SimpleBar 实现自定义滚动条</title>
  <link rel="stylesheet" href="simplebar.css">
</head>

<body>
  <div class="simplebar-content">
    <!-- content goes here -->
  </div>

  <script src="simplebar.js"></script>
  <script>
    new SimpleBar(document.querySelector('.simplebar-content'));
  </script>
</body>

</html>

ログイン後にコピー

上記はスクロールバーを削除する 3 つの方法です。その中でも、JavaScript を使用してカスタムスクロールバーを実装するのは最も柔軟な方法であり、さまざまな状況で必要なスクロールバー効果を実現できます。

以上がスクロールバーを削除するCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。