2015-10-05 7 views
5

मेरे पास एक div (#block_list) के अंदर तत्व (.block) हैं। #block_list का अभिभावक एक और div (#block_list-wrapper) है जिसमें एक निश्चित स्थिति है। अब #block_list-wrapper में निश्चित स्थिति है, #block_list के कुछ तत्व प्रदर्शित नहीं होते हैं। मैं उन्हें स्क्रॉलबार का उपयोग करके प्रदर्शित करना चाहता हूं।एक निश्चित स्थिति तत्व के अंदर स्क्रॉलबार प्रदर्शित करें

एचटीएमएल: 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) को प्रदर्शित करने के लिए मैं स्क्रॉल बार कैसे दिखा सकता हूं? सीएसएस के साथ ऐसा करना, अन्य उत्तर की तरह कहते हैं कि

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

Updated CodePen

एक अन्य समाधान हो सकता है, जाहिर है,:

+0

'slimScroll' साथ प्रयास करें। –

+3

किसी तत्व पर किसी भी प्रकार की स्कॉलिंग करने के लिए आपको एक निश्चित ऊंचाई जोड़ने की आवश्यकता है। http://codepen.io/anon/pen/WQpVgW –

+1

@StefanPerju अरे, यहां रोमन लोगों से मिलने में खुशी हुई !! : डी –

उत्तर

3

तत्व की ऊंचाई निर्धारित करने के लिए निम्न कोड पंक्ति जोड़ें।

0

आपके पास ऊंचाई निर्दिष्ट नहीं है। आप निम्न तरीकों में से एक में कंटेनर के लिए ऊँचाई निर्दिष्ट कर सकते हैं:

  1. अपने #block_list-wrapper #block_list को height: 100vh निर्दिष्ट करें, या
  2. अपने #block_list-wrapper और फिर एक height:100% को height: 100vh निर्दिष्ट करें अपने #block_list-wrapper #block_list करने के लिए।

आपका codepen: http://codepen.io/anon/pen/jbBgpo

1

जोड़ें ऊंचाई दोनों अपने block_list और block_list-आवरण के लिए 100% और उसके बाद अतिप्रवाह जोड़ें: block_list पर स्क्रॉल करें।

0

आपको block_list तत्व के लिए निश्चित ऊंचाई निर्धारित करने की आवश्यकता है। आप vh संपत्ति का उपयोग कर सकते हैं और heigth: 100vh सेट कर सकते हैं।

एक CodePen here

0

अद्यतन तत्व को ऊंचाई दे दो ताकि आप div पर स्क्रोलर मिल सकता है। निम्न लिंक कोड ठीक काम करता है।

https://jsfiddle.net/LLrkfvhf/

संबंधित मुद्दे