केवल आवश्यक होने पर ही मैं स्क्रॉल पर एक div पर कैसे बनाऊँ?

Question

मेरे पास यह div है:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

स्क्रॉलबार हमेशा दिखाई देते हैं, भले ही टेक्स्ट ओवरफ्लो न हो। मैं स्क्रॉलबार्स को केवल आवश्यक होने पर ही दिखाई देना चाहता हूं - अर्थात, केवल तब दिखाई देता है जब बॉक्स में पर्याप्त पाठ होता है जिसकी उन्हें आवश्यकता होती है। जैसे एक टेक्सारिया करता है। मैं यह कैसे करु? या एक textarea शैली के लिए मेरा एकमात्र विकल्प है तो यह एक div की तरह दिखता है?

Comments

इस बारे में क्या। ओवर होवर करने पर केवल स्क्रॉलबार दिखाता है। यकीन नहीं होता कि यह आपके लिए उपयोगी है। stackoverflow.com/questions/7125185/…

— रयान ब्यूलियू

codepen.io/anon/pen/QwLeMG उम्मीद है कि यह आपकी मदद कर सकता है

— vishalkin

overflow: auto;एंड्रॉइड पर काम नहीं करता है :-(

— aioobe

Answer 1

का उपयोग करें overflow: auto। स्क्रॉलबार तभी दिखाई देंगे जब जरूरत होगी।

(सिडेनोट, आप केवल एक्स, या वाई स्क्रॉलबार: overflow-x: autoऔर overflow-y: auto) के लिए भी निर्दिष्ट कर सकते हैं ।

Comments

ध्यान दें कि अतिप्रवाह-y केवल तभी काम करता है जब आप निर्दिष्ट करते हैंmax-height

— ब्लैक

अतिप्रवाह-y को ​​अधिकतम ऊंचाई की आवश्यकता नहीं है। मैंने कभी भी अतिप्रवाह-वाई के साथ अधिकतम ऊंचाई का उपयोग नहीं किया और यह हर बार काम करता है।

— सुमाफू

@Sumafu आपको केस के आधार पर इसकी आवश्यकता हो सकती है, जैसा कि मैं अभी अनुभव कर सकता हूं।

— डेविड

यदि आप ओवरफ्लो तत्व का उपयोग कर रहे हैं या स्थिति की आवश्यकता है तो सेट heightया max-heightसेट करेंगे क्योंकि ये तत्व को पेज या व्यूपोर्ट सीमाओं के आधार पर आकार बदलने से रोकते हैं। absolutefixed

— स्कॉट स्कूपबैच

Answer 2

इसे इस्तेमाल करे:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

Answer 3

प्रयत्न

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

Answer 4

प्रयत्न

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

Answer 5

मैंने पाया कि अभी भी दिखावा की ऊंचाई है, जब इसमें पाठ है या नहीं। तो आप इसका उपयोग सर्वोत्तम परिणामों के लिए कर सकते हैं।

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>

Answer 6

आप नीचे एक के साथ कोशिश कर सकते हैं:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>