मैं स्वचालित रूप से अपनी div में वर्टिकल स्क्रॉलबार कैसे जोड़ सकता हूँ?

110

मैं अपने लिए एक वर्टिकल स्क्रॉलबार जोड़ना चाहता हूं <div>। मैंने कोशिश की है overflow: auto, लेकिन यह काम नहीं कर रहा है। मैंने फ़ायरफ़ॉक्स और क्रोम में अपने कोड का परीक्षण किया है।

मैं यहाँ div शैली कोड चिपका रहा हूँ:

float: left;
width: 1000px;
overflow: auto;

— नीलकंठ
स्रोत

jsfiddle या अधिक सीएसएस अपने मार्कअप के साथ

— ऋतब्रत गौतम

12

यह कोशिश करो: overflow-y:scrollऔर कुछ ऊंचाई । इस डॉक्स के माध्यम से जाओ ।

— Mr_Green

धन्यवाद Mr_Green आपके उत्तर के लिए। लेकिन यह कोड मेरे लिए काम नहीं कर रहा है।

— jay

स्क्रॉल काम करने के लिए, अंदर की सामग्री को ओवरफ्लो करना चाहिए ।

— Mr_Green

यहां अपना html और css कोड पोस्ट करें।

— Mr_Green

145

overflow: auto;प्रॉपर्टी का काम करने के लिए आपको कुछ ऊँचाई असाइन करने की आवश्यकता है ।
परीक्षण उद्देश्य के लिए, जोड़ें height: 100px;और जांचें।
और यह भी बेहतर होगा यदि आप overflow-y:auto;इसके बजाय देते हैं overflow: auto;, क्योंकि यह तत्व को केवल ऊर्ध्वाधर स्क्रॉल करने के लिए बनाता है, लेकिन क्षैतिज नहीं।

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

यदि आपको कंटेनर की ऊँचाई का पता नहीं है और आप ऊर्ध्वाधर स्क्रॉलबार दिखाना चाहते हैं, जब कंटेनर एक निश्चित ऊँचाई पर पहुँचता है 100px, तो संपत्ति के max-heightबजाय उपयोग करें height।

अधिक जानकारी के लिए, यह एमडीएन लेख पढ़ें ।

— श्रीमान हरे
स्रोत

हां, मैंने आपकी बात मान ली और परीक्षण किया, यह क्रोम में ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं। एक और भ्रामक बात यह है कि ऊर्ध्वाधर स्क्रॉलबार एफएफ में पेज लोड समय पर दिखाई दे रहा है लेकिन पेज लोडिंग पूरा होने पर गायब हो गया है!

— jay

"आपको कुछ ऊंचाई निर्दिष्ट करने की आवश्यकता है" बिल्कुल मेरी समस्या, धन्यवाद! : पी

— वागनर दा सिल्वा

51

आपको max-heightसंपत्ति जोड़ना है।

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}

<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>

स्निपेट का विस्तार करें

— Devt
स्रोत

20

आप सेट कर सकते हैं:

overflow-y: scroll;height: XX px

2

यह पिछले उत्तरों द्वारा सुझाया गया है।

— उमेनोबेव

14

मुझे अपने ऊपर एक अद्भुत घुमक्कड़ मिला div-popup। लागू करने के लिए, इस शैली को अपने div तत्व में जोड़ें:

overflow-y: scroll;
height: XXXpx;

heightआपके द्वारा निर्दिष्ट div की ऊंचाई हो जाएगा और एक बार अगर आप इस ऊंचाई को पार करने के सामग्रियां हैं, आप इसे स्क्रॉल करना पड़ता है।

धन्यवाद।

— अताबोय जोसेफ
स्रोत

13

अपने div में वर्टिकल स्क्रॉल बार दिखाने के लिए आपको जोड़ना होगा

height: 100px;   
overflow-y : scroll;

या

height: 100px; 
overflow-y : auto;

— रिकार्डो रोमियो
स्रोत

10

मुझे पूरा यकीन नहीं है कि आप किस लिए div का उपयोग करने का प्रयास कर रहे हैं, लेकिन यह कुछ यादृच्छिक पाठ के साथ एक उदाहरण है।

Mr_Green ने सही निर्देश दिए जब उन्होंने कहा overflow-y: autoकि जोड़ने के लिए कि यह ऊर्ध्वाधर स्क्रॉल करने के लिए प्रतिबंधित करता है। यह एक JSFiddle उदाहरण है:

JSFiddle

— MitulP91
स्रोत

सबसे पहले @ मेरा_ग्रीन आपका सुझाव क्रोम में ठीक काम कर रहा है लेकिन एफएफ में नहीं। और क्या हाइट जोड़ने का कोई विकल्प है, क्योंकि मैं अपने डिज़ाइन संरचना के लिए अपने डिव से हाइट नहीं जोड़ सकता।

— jay

2

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

स्निपेट का विस्तार करें

— गुरू प्रसाद
स्रोत

2

कृपया अपने उत्तर में स्पष्टीकरण जोड़ें

— मस्तिसा

स्रोत (और स्पष्टीकरण) लगता है: simurai.com/blog/2011/07/26/webkit-scrollbar ।

— कोबराबॉय