मुख्य स्क्रॉलबार बनाना हमेशा दिखाई देता है

179

जब कोई उपयोगकर्ता किसी वेब पेज पर जाता है (जब पेज स्क्रॉलबार के सक्रियण को ट्रिगर करने के लिए पर्याप्त सामग्री नहीं है) तो ब्राउज़र के ऊर्ध्वाधर स्क्रॉलबार को देखने के लिए सीएसएस की आवश्यकता क्या है?

html css xhtml

— डेनिज डोगन
स्रोत

1

विंडोज में स्क्रॉलबार को कूदने से रोकने के लिए एक बेहतर उपाय है ।

— जोश हबदास

333

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

यह स्क्रॉलबार को हमेशा दिखाई देता है और केवल तभी सक्रिय होता है जब जरूरत होती है।

अद्यतन: यदि उपर्युक्त केवल इस का उपयोग करके काम नहीं करता है।

html {
    overflow-y:scroll;
}

— Corv1nus
स्रोत

3

क्या आपके पास कोई विचार है जो एफएफ के किस संस्करण के लिए समर्थन लाया है overflow-y? जैसा कि ऐसा लगता है कि संपत्ति के -moz-scrollbars-verticalपक्ष में पदावनत किया गया overflow-yहै।

— इओनु 19: जी। स्टेन

मुझे लगता है कि इंटरनेट एक्सप्लोरर 6.x +, फ़ायरफ़ॉक्स 1.5+ अगर मुझे सही याद है। मैं उपरोक्त कोड का उपयोग कर रहा हूं और यह मेरे लिए FF1.5-3.5.1 और IE6-8 में काम करता है।

— Corv1nus

2

क्या "पेज जंपिंग" का कोई विकल्प है जब आपकी साइट के कुछ पृष्ठ स्क्रॉल बार के लिए बहुत छोटे हैं और अन्य हैं? या यह "सर्वोत्तम अभ्यास" है? मुझे मानना पड़ेगा, मुझे कई ऐसे पृष्ठ दिखाई नहीं देते हैं जो पूर्ण पृष्ठ नहीं लेते हैं।

— जेस

2

मुझे यकीन नहीं है कि यह सबसे अच्छा अभ्यास है लेकिन, सभी पृष्ठों पर स्क्रॉलबार होने और केवल तभी सक्रिय होने पर, पृष्ठ कूदने से बचने के लिए आमतौर पर एक स्वीकार्य समाधान है। मैं जंप पर लगातार स्क्रॉलबार पसंद करना चाहता हूं।

— Corv1nus

1

उन लोगों के लिए (मेरे जैसे) जो htmlथोड़ा हैक-वाई स्टाइल करते हैं , ध्यान दें कि आप :rootइसके बजाय संरचनात्मक छद्म चयनकर्ता का उपयोग कर सकते हैं html। देखें: developer.mozilla.org/en-US/docs/Web/CSS/:root

— रौनिन

31

सुनिश्चित करें कि अतिप्रवाह "स्क्रॉल" नहीं "ऑटो" पर सेट है। ओएस एक्स लायन में कहा गया है कि , "स्क्रॉल" करने के लिए सेट किया गया ओवरफ्लो उस स्क्रॉलबार में ऑटो की तरह अधिक व्यवहार करता है, तब भी केवल तब ही दिखाई देगा जब इसका उपयोग किया जाएगा। तो अगर ऊपर दिए गए कोई भी समाधान काम नहीं करते हैं तो ऐसा क्यों हो सकता है।

आपको इसे ठीक करने की आवश्यकता होगी:

::-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);
}

यदि आप डिफ़ॉल्ट को पसंद नहीं करते हैं तो आप उसके अनुसार इसे स्टाइल कर सकते हैं।

— molls223
स्रोत

1

यह बात काम! लेकिन आप इसे केवल एक विशिष्ट div पर कैसे बना सकते हैं?

— रिच

@ किसी भी अन्य सीएसएस तत्व की तरह। .yourdiv :: - वेबकिट-स्क्रॉलबार {...}

— क्रिश

@ क्रिस हाय, उत्तर के लिए धन्यवाद, यहाँ इसका उदाहरण है। stackoverflow.com/a/54667091/2637261

— रिच

इसका उपयोग क्यों किया जाता है-webkit-appearance: none;

— सूरज जैन

यह भी खूब रही! स्वीकृत उत्तर होना चाहिए।

— साइबरपुकर

25

पिछले वर्षों में चीजें बदल गई हैं। ऊपर दिए गए उत्तर सभी मामलों में मान्य नहीं हैं। Apple हर जगह गायब स्क्रॉल स्क्रॉल कर रहा है। मैक (और आईओ) पर सफारी, क्रोम और फ़ायरफ़ॉक्स केवल स्क्रॉलबार दिखाते हैं जब वास्तव में स्क्रॉल करते हैं - मुझे वर्तमान विंडोज / IE के बारे में पता नहीं है। हालाँकि वेबकिट पर स्क्रॉल पट्टियों को स्टाइल करने के लिए गैर-मानक तरीके हैं (IE काफी समय पहले गिरा था)।

— फ्रैंक लैमर
स्रोत

लेकिन यह उन नए लोगों पर गर्व से नीचा दिखाती है?

— बेन

3

गायब स्क्रॉल पर इस उत्कृष्ट बिंदु के लिए धन्यवाद। मेरे लिए स्क्रॉलबार को दिखाई देने का कारण उस मामूली लेकिन बहुत ध्यान देने योग्य और बहुत परेशान करने वाले झटके से बचने के लिए था क्योंकि सामग्री स्क्रॉल में नहीं होने से बदल जाती है। गायब स्क्रॉलबार के साथ, वे शरीर को झटका नहीं देते हैं जब वे मेरे लिए ठीक दिखाते हैं और छिपाते हैं। लेकिन इस उत्कृष्ट बिंदु के लिए धन्यवाद।

— Noitidart

4

एक UX दृष्टिकोण से, ज्यादातर बार हम स्क्रॉलबार दृश्यमान चाहते हैं। वर्तमान प्रवृत्ति के अनुसार, यदि कोई स्क्रॉलबार दिखाई नहीं देता है, तो सूची में अधिक के लिए एक दृश्यमान सूची को "आज़माने" के लिए अतिरिक्त कदम होना चाहिए। एक अतिरिक्त दृश्य सुराग कि ड्रॉप डाउन या सूची में अधिक आइटम हैं यदि लोगों को एक स्क्रॉलबार दिखाई देता है, तो इसकी आवश्यकता नहीं है।

— विंडसर्फ88

24

html {
    overflow-y: scroll;
}

क्या तुम यही चाहते हो?

दुर्भाग्य से, ओपेरा 9.64 जब के लिए आवेदन किया है कि सीएसएस घोषणा की उपेक्षा करने लगता है HTMLया BODYहै, हालांकि यह जैसे अन्य ब्लॉक स्तर तत्वों के लिए काम करता है DIV।

— आयनू जी स्टेन
स्रोत

13

html {height: 101%;}

मैं इस क्रॉस ब्राउज़र समाधान का उपयोग करता हूं (ध्यान दें: मैं हमेशा 1 पंक्ति में DOCTYPE घोषणा का उपयोग करता हूं, मुझे नहीं पता कि यह quirksmode में काम करता है, कभी भी इसका परीक्षण नहीं किया गया )।

यह हमेशा हर पृष्ठ में एक सक्रिय वर्टिकल स्क्रॉल बार दिखाएगा , वर्टिकल स्क्रॉलबार केवल कुछ पिक्सेल के लिए स्क्रॉल करने योग्य होगा।

जब पृष्ठ की सामग्री ब्राउज़र के दृश्य क्षेत्र (व्यू पोर्ट) से कम हो जाती है, तब भी आप ऊर्ध्वाधर स्क्रॉलबार को सक्रिय देखेंगे, और यह केवल कुछ पिक्सेल के लिए स्क्रॉल करने योग्य होगा।

यदि आप सीएसएस सत्यापन के प्रति आसक्त हैं (मैं केवल HTML सत्यापन के साथ ही आक्षेप कर रहा हूं) तो इस समाधान का उपयोग करके आपका सीएसएस कोड W3C के लिए भी मान्य होगा क्योंकि आप गैर मानक सीएसएस विशेषताओं का उपयोग नहीं कर रहे हैं -moz-scrollbars-vertical

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

1

एलिगेंट सॉल्यूशन

— आर्टूर कीन

12

body { height:101%; } "फसल" बड़े पृष्ठ होंगे।

इसके बजाय, मैं उपयोग करता हूं:

body { min-height:101%; }

— स्कॉट
स्रोत

1

यह सवाल 5 साल पहले पूछा गया था और इसका पहले से ही एक स्वीकृत जवाब है। आपका उत्तर पहले से स्वीकृत उत्तर की तुलना में बेहतर उत्तर प्रदान नहीं करता है।

— दीपन शाह

18

यह उत्तर वास्तव में अन्य उत्तरों में प्रदान नहीं की गई अतिरिक्त जानकारी प्रदान करता है।

— GaTechThomas 23

2

मैं इसे बॉडी टैग में जोड़कर काम करने में सक्षम था। मेरे लिए अच्छे थे क्योंकि मेरे पास html एलिमेंट पर कुछ भी नहीं था।

body {
    overflow-y: scroll;
}

— Jazzepi
स्रोत

2

एक वैकल्पिक दृष्टिकोण html तत्व की चौड़ाई को 100vw पर सेट करना है। बहुत से ब्राउज़र नहीं होने पर, यह स्क्रॉलबार के चौड़ाई पर प्रभाव को कम करता है।

html { width: 100vw; }

— lunelson
स्रोत

0

101% ऊंचाई तय करना समस्या का समाधान है। जब आप व्यूपोर्ट की ऊँचाई और ऐसा न करने वाले लोगों के बीच स्विच करते हैं तो आप पृष्ठ 'फ़्लिक' नहीं करेंगे।

— संजल कोर
स्रोत

0

body { 
    min-height: 101vh; 
}

मेरे लिए सबसे अच्छा काम करता है

— लोलो
स्रोत

0

मैं यह करता हूँ:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

तब मुझे बदसूरत ग्रेबर्ड को स्क्रॉलबार में देखने की ज़रूरत नहीं है जब इसकी ज़रूरत नहीं है।

— Stian
स्रोत

सवाल यह पूछता है कि यह हमेशा दिखाई दे।

— Corv1nus