Wie erstelle ich scrollbare Divs ohne sichtbare Bildlaufleisten in anderen Browsern?

Bildlauffähige Divs ohne sichtbare Bildlaufleisten in anderen Browsern erstellen

Zusätzlich zur bereitgestellten Webkit-Lösung können Sie den gleichen Effekt in anderen Browsern erzielen durch den Einsatz einer cleveren CSS-Technik. So geht's:

CSS-Lösung:

1. Wickeln Sie Ihr scrollbares Div in ein anderes Div:

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

2. Legen Sie „overflow: versteckt“ für das äußere Div fest, um dessen Bildlaufleiste auszublenden:

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

3. Setzen Sie „overflow: auto“ für das innere Div ein, um das Scrollen zu ermöglichen:

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

So funktioniert es:

Indem Sie das scrollbare Div mit „overflow: versteckt“ in das äußere Div einschließen, „fangen“ Sie die Bildlaufleiste im Wesentlichen im äußeren Div ein und machen es unsichtbar. Das innere Div übernimmt das eigentliche Scrollen, während es durch die Einschränkungen des äußeren Div eingeschränkt wird.

Beispiel:

Schauen Sie sich dieses Beispiel unter https://jsfiddle.net/qqPcb an / für eine funktionierende Demonstration.

Hinweis:

Diese Technik wird auch vom beliebten jQuery-Plugin jScrollPane verwendet, das eine umfassendere Lösung zum Ausblenden von Bildlaufleisten bietet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich scrollbare Divs ohne sichtbare Bildlaufleisten in anderen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!