HTMLとCSSを使用してスクロールバーを非表示にする方法

Web デザインでは、スクロール バーは非常に一般的な要素ですが、スクロール バーを非表示にし、他の方法を使用してスクロールを実現したい場合があります。この記事ではHTMLとCSSを使ってスクロールバーを非表示にする方法を紹介します。

まず、スクロール バーがどのように生成されるかを理解する必要があります。 HTML では、コンテンツが表示領域を超えると、ブラウザによってスクロール バーが自動的に生成されます。スクロール バーの外観と動作はオペレーティング システムとブラウザによって決まり、ブラウザやオペレーティング システムが異なればスクロール バーのスタイルも異なる場合があります。

スクロール バーを非表示にするには、CSS を使用してスクロール領域のスタイルを制御する必要があります。 CSS の overflow プロパティを使用してコンテンツのオーバーフローを制御し、::-webkit-scrollbar 擬似要素を使用してスクロール バーのスタイルを制御できます。

まず、オーバーフロー属性を使用してスクロール バーを非表示にする方法を見てみましょう。スクロールバーを非表示にする必要があるコンテナのオーバーフロープロパティを非表示に設定できます。こうすることで、コンテンツがオーバーフローしても、ブラウザーはスクロール バーを生成しませんが、コンテンツは引き続きスクロール可能です。

たとえば、次のコードを使用して div 要素のスクロール バーを非表示にすることができます:

<div style="height: 200px; width: 200px; overflow: hidden;">
  ...
</div>

オーバーフロー属性を非表示ではなく自動に設定して、コンテンツのみを表示できるようにします。ストリップからオーバーフローしたときにスクロールを表示します。次に、CSS の ::-webkit-scrollbar 擬似要素を使用して、スクロール バーのスタイルを制御できます。

以下はサンプル コードです:

<style>
  .scrollbar-container {
    height: 200px;
    width: 200px;
    overflow: auto;
  }
  
  .scrollbar-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .scrollbar-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
  }
  
  .scrollbar-container::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
</style>

<div class="scrollbar-container">
  ...
</div>

上記のコードでは、まずスクロールする必要があるコンテンツを含む div 要素を作成します。この div 要素の高さと幅を 200px に設定し、そのオーバーフロー プロパティを auto に設定して、コンテンツがオーバーフローした場合にのみスクロールバーが表示されるようにします。

次に、CSS の ::-webkit-scrollbar 擬似要素を使用して、スクロール バーのスタイルを制御します。まずスクロール バーの幅と高さを設定し、次にスクロール バーのサムの背景色と境界線の半径を指定しました。最後に、スクロールバー トラックの背景色を設定します。

この例では、WebKit ブラウザ エンジンの ::-webkit-scrollbar 擬似要素を使用して、スクロール バーのスタイルを制御します。 Web サイトが他のブラウザをサポートする必要がある場合は、スクロール バーのスタイルを制御するために別の擬似要素を使用する必要がある場合があります。

終了する前に、現在、ほとんどの主流ブラウザはスクロール バーを非表示にするこの方法をサポートしていますが、IE や Edge などの一部の古いバージョンのブラウザはサポートしていないことに注意する必要があります。これらの古いブラウザーのバージョンでは、JavaScript を使用してスクロールバーの表示を制御できます。

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