他のブラウザでスクロールバーを表示せずにスクロール可能な Div を作成するにはどうすればよいですか?

他のブラウザでスクロールバーを表示せずにスクロール可能な Div を作成する

提供されている Webkit ソリューションに加えて、他のブラウザでも同じ効果を実現できます賢い CSS テクニックを使用することで。方法は次のとおりです:

CSS ソリューション:

1. スクロール可能な div を別の div 内でラップします:

<code class="html"><div id="outer-div">
  <div id="inner-div" style="overflow: auto;">
    <!-- Your scrollable content goes here -->
  </div>
</div></code>

2. 外側の div に overflow: hidden を設定して、その div を非表示にしますスクロールバー:

<code class="css">#outer-div {
  overflow: hidden;
}</code>

3. スクロールを許可するには、内側の div にオーバーフロー: auto を設定します:

<code class="css">#inner-div {
  overflow: auto;
}</code>

仕組み:

overflow: hidden を使用して外側の div 内でスクロール可能な div をラップすると、基本的に、スクロールバーを外側の div 内に「トラップ」し、非表示にします。内側の div は、外側の div の制限によって制限されながら、実際のスクロールを処理します。

例:

この例は、https://jsfiddle.net/qqPcb で確認してください。 / 働くために

注:

この手法は、人気のある jQuery プラグインである jScrollPane でも採用されており、スクロールバーを非表示にするためのより包括的なソリューションを提供します。

以上が他のブラウザでスクロールバーを表示せずにスクロール可能な Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。