在固定位置元素内部显示滚动条

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

在固定位置元素内部显示滚动条

回答

相关问题