Anzeige Bildlaufleiste in einem festen Positionselement

Question

Ich habe Elemente (.block) in einem div (#block_list). Das übergeordnete Element von #block_list ist ein anderes div (#block_list-wrapper), das eine feste Position hat. Jetzt, da die #block_list-wrapper eine feste Position hat, werden einige der Elemente der #block_list nicht angezeigt. Ich möchte sie mit einer Bildlaufleiste anzeigen.

html:

<div id="block_list-wrapper"> 
    <div id="handle-wrapper"> 
     <div id="handle"> 
      <i class="fa fa-chevron-right"></i> 
      <i class="fa fa-chevron-left"></i> 
     </div> 
    </div> 
    <div id="block_list"> 
     <div class="one_column_block-1 block"> 
      <img src="static/image/one_column_block-1.png"> 
     </div> 
     <div class="one_column_block-2 block"> 
      <img src="static/image/one_column_block-2.png"> 
     </div> 
     ... 
     ... 
     ... 
     <div class="one_column_block-1 block"> 
      <img src="static/image/four_column_block-3.png"> 
     </div> 
    </div> 
</div> 

-Code-Demo auf codepen.io

habe ich versucht, das Hinzufügen overflow: scroll wie so,

#block_list-wrapper #block_list { 
    width: 250px; 
    overflow: scroll; 
} 

aber es hat auch nicht geholfen. Wie kann ich die Bildlaufleiste anzeigen, um alle Elemente (.block) innerhalb der #block_list anzuzeigen?

Answer 1

die folgende Codezeile hinzufügen, die Höhe des Elements zu setzen:

$("#block_list").css("height", $(window).height()) 

Updated CodePen

Eine andere Lösung wäre natürlich, dies mit CSS zu tun, wie die anderen Antworten sagen.

Answer 2

Sie haben keine Höhe angegeben. Sie können, geben Sie die Höhe des Behälters in eine der folgenden Möglichkeiten:

1. Geben height: 100vh auf Ihre #block_list-wrapper #block_list oder
2. Geben height: 100vh auf Ihre #block_list-wrapper und dann ein height:100% zu Ihrem #block_list-wrapper #block_list.

Ihre codepen: http://codepen.io/anon/pen/jbBgpo

Answer 3

Add Höhe von 100% auf beide Ihre block_list und block_list-Wrapper und dann Überlauf hinzufügen: blättern block_list.

Answer 4

Sie müssen eine feste Höhe für das Element block_list festlegen. Sie können die vh-Eigenschaft verwenden und heigth: 100vh festlegen.

Ein CodePen here aktualisiert

Answer 5

Geben Höhe auf das Element so, dass Sie das Stellrad auf div bekommen konnte. Der folgende Linkcode funktioniert einwandfrei.

https://jsfiddle.net/LLrkfvhf/