在固定位置元素內部顯示滾動條

我在div（#block_list）中有元素（.block）。 #block_list的父項是另一個具有固定位置的div（#block_list-wrapper）。現在由於#block_list-wrapper具有固定位置，因此#block_list的某些元素不顯示。我想用滾動條來顯示它們。在固定位置元素內部顯示滾動條

HTML：在codepen.io

<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>

代碼演示中，我嘗試添加overflow: scroll像這樣，

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

，但它並沒有幫助。

如何顯示滾動條以在#block_list內顯示所有元素（.block）？

來源

2015-10-05 Aamu

嘗試使用'slimScroll'。 –

您需要添加一個固定高度才能在元素上進行任何形式的滾動。 http://codepen.io/anon/pen/WQpVgW –

@StefanPerju嘿，很高興在這裏認識羅馬尼亞人！：D –

添加下面的代碼行設置元素的高度：

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

Updated CodePen

另一個解決方案是，很明顯，用CSS來做到這一點，像其他的答案說。

來源

2015-10-05 11:00:44

您沒有指定高度。您可以指定高度和容器中的下列方式之一：

指定height: 100vh您#block_list-wrapper #block_list，或者
指定height: 100vh您#block_list-wrapper，然後height:100%您#block_list-wrapper #block_list。

你codepen：http://codepen.io/anon/pen/jbBgpo

來源

2015-10-05 11:01:02 Abhitalks

添加高100％到您的block_list和block_list，包裝既然後添加溢出：滾動到block_list。

來源

2015-10-05 11:01:19 Paran0a

您需要爲block_list元素設置一個固定的高度。您可以使用vh屬性並設置heigth: 100vh。

更新的CodePen here

來源

2015-10-05 11:08:09

給予高度的元素，這樣你可以得到div滾輪。以下鏈接代碼正常工作。

https://jsfiddle.net/LLrkfvhf/

來源

2015-10-05 11:09:34

在固定位置元素內部顯示滾動條

回答

相關問題