2015-10-05 17 views
5

Tôi có các phần tử (.block) bên trong một div (#block_list). Phụ huynh của #block_list là một div khác (#block_list-wrapper) có vị trí cố định. Bây giờ kể từ khi #block_list-wrapper có vị trí cố định, một số thành phần của #block_list không được hiển thị. Tôi muốn hiển thị chúng bằng cách sử dụng thanh cuộn.Hiển thị thanh cuộn bên trong một phần tử vị trí cố định

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> 

bản demo Mã tại codepen.io

Tôi đã thử thêm overflow: scroll như vậy,

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

nhưng nó không giúp được gì.

Làm cách nào tôi có thể hiển thị thanh cuộn để hiển thị tất cả các phần tử (.block) bên trong #block_list?

+0

thử với 'slimScroll'. –

+3

bạn cần phải thêm chiều cao cố định để có bất kỳ loại scolling nào trên một phần tử. http://codepen.io/anon/pen/WQpVgW –

+1

@StefanPerju Xin chào, gặp gỡ người Romania ở đây !! : D –

Trả lời

3

Thêm dòng mã sau đây để thiết lập chiều cao của nguyên tố này:

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

Updated CodePen

Một giải pháp khác sẽ, rõ ràng, để làm điều này với CSS, giống như câu trả lời khác nói.

0

Bạn không có chiều cao được chỉ định. Bạn có thể, xác định chiều cao để chứa trong một trong các cách sau:

  1. Chỉ định height: 100vh-#block_list-wrapper #block_list của bạn, hoặc
  2. Chỉ định height: 100vh-#block_list-wrapper của bạn và sau đó một height:100% để #block_list-wrapper #block_list của bạn.

codepen của bạn: http://codepen.io/anon/pen/jbBgpo

1

Add chiều cao 100% cho cả block_list của bạn và block_list-wrapper và sau đó thêm tràn: di chuyển đến block_list.

0

Bạn cần đặt chiều cao cố định cho phần tử block_list. Bạn có thể sử dụng thuộc tính vh và đặt heigth: 100vh.

Một cập nhật CodePen here

0

Cho chiều cao đến yếu tố để bạn có thể nhận được cuộn trên div. Mã liên kết sau hoạt động tốt.

https://jsfiddle.net/LLrkfvhf/

Các vấn đề liên quan