सीएसएस - अतिप्रवाह: स्क्रॉल; - हमेशा वर्टिकल स्क्रॉल बार दिखाएं?

Question

इसलिए वर्तमान में मेरे पास है:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

हालाँकि मुझे विश्वास नहीं है कि यह कुछ उपयोगकर्ताओं के लिए स्पष्ट होगा कि वहाँ अधिक सामग्री है। वे बिना यह जाने पेज को स्क्रॉल कर सकते हैं कि मेरी डिव में वास्तव में बहुत अधिक सामग्री है। मैं ऊंचाई 510px का उपयोग करता हूं ताकि यह कुछ पाठ को काट दे ताकि कुछ पृष्ठों पर ऐसा लगे कि अधिक सामग्री है, लेकिन यह उन सभी के लिए काम नहीं करता है।

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

Comments

उह, क्या आप jsfiddle पर इस सटीक व्यवहार को फिर से बना सकते हैं ? आपके द्वारा प्रदत्त सीएसएस को एक स्क्रॉलबार को हर समय उपस्थित रहने के लिए मजबूर करना चाहिए।

— sg3s

हाँ, आपको लगता है कि आपके पास कुछ अन्य सीएसएस quirks हैं जो इस कारण से चल रहे हैं, यह हमेशा स्क्रॉलबार प्रदर्शित करना चाहिए। सुनिश्चित करें कि डिव की रैपिंग यह एक ठीक से स्टाइल कर रहे हैं।

— शॉन स्टीवर्ड

मैं शेर चला रहा हूँ! शायद यही है? मैं एक वर्चुअल मशीन खोलूंगा और देखूंगा कि यह किस तरह की चीजों की खिड़कियों की तरफ है ...

— जंबो

धिक्कार है, मेरा बुरा! यह लायन में एक विशेषता है। मुझे वास्तव में पढ़ना चाहिए कि मैं इसे खरीदने से पहले क्या खरीद रहा हूं ... धन्यवाद दोस्तों!

— जंबो

Answer 1

बस खुद इस समस्या में भाग गया। OSx Lion स्क्रॉलबार को छुपाता है, जबकि इसे अधिक "स्लीक" प्रतीत करने के लिए उपयोग नहीं किया जाता है, लेकिन एक ही समय में आपके द्वारा संबोधित किया जाने वाला मुद्दा सामने आता है: लोग कभी-कभी यह नहीं देख पाते हैं कि किसी div में स्क्रॉल सुविधा है या नहीं।

तय: आपके सीएसएस में शामिल हैं -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

आवश्यकतानुसार आवश्यकतानुसार अनुकूलित करें। स्रोत

Comments

यह भी सफारी के साथ iPad पर काम करना चाहिए? मैं iOS 6.1.3 पर चलने वाले iPad 2 पर हूं और यह काम नहीं करता है।

— crampicco

क्या इसे केवल विशिष्ट वर्ग के लिए लागू करने का एक तरीका है?

— भविष्य

कंटेनर पर 'ओवरफ्लो: ऑटो' सेट करने के बाद ही मेरे लिए काम किया (मेरे मामले में, एक <ul>)। धन्यवाद!

— रोब कैंपियन

@futbolpal हाँ, यह एक कक्षा में काम करता है; try .classname :: - webkit-स्क्रॉलबार

— चेस

मैं क्षैतिज काम करने के लिए इसे कैसे प्राप्त कर सकता हूं? बार ऊर्ध्वाधर स्क्रॉल के लिए दिखाई देता है लेकिन क्षैतिज स्क्रॉल नहीं

— ब्रिटिश

Answer 2

कृपया iPad सफारी पर ध्यान दें, यदि आपके पास webkit-overflow-scrolling: touch;कहीं भी आपके सीएसएस में नोवोसैकिंग का समाधान काम नहीं करेगा । समाधान या तो सभी घटनाओं को हटा रहा है या नोविसकोडिंग के समाधान के साथ -webkit-overflow-scrolling: touch;डाल रहा है -webkit-overflow-scrolling: auto;।

Comments

क्या हमारी सीएसएस में यह संभव है - वेबकिट-ओवरफ्लो-स्क्रॉलिंग: टच और स्क्रॉलबार?

— जुलसी जूल

Answer 3

यह मेरे परीक्षण से आईओएस 7.1.x पर सफारी पर आईपैड के साथ काम करेगा, मुझे हालांकि आईओएस 6 के बारे में निश्चित नहीं है। हालाँकि, यह फ़ायरफ़ॉक्स पर काम नहीं करेगा। एक jQuery प्लगइन है जिसका उद्देश्य क्रॉस ब्राउज़र अनुरूप होना चाहिए जिसे jScrollPane कहा जाता है ।

इसके अलावा, स्टैक ओवरफ्लो पर यहां एक डुप्लिकेट पोस्ट है जिसमें कुछ अन्य विवरण हैं।

Comments

ज्ञात हो कि यह सवाल 2 साल पहले पूछा गया था, इससे पहले iOS6 भी मौजूद था।

— ओगाजा

webkit केवल सफारी क्रोम है। आपको

— बजे

Answer 4

यह स्क्रॉल बार को हमेशा प्रदर्शित करेगा जब विंडोज़ के भीतर सामग्री होती है जिसे एक्सेस करने के लिए स्क्रॉल किया जाना चाहिए, यह मैक पर सभी विंडोज़ और सभी ऐप पर लागू होता है:

Menu Apple मेनू से सिस्टम प्राथमिकताएं लॉन्च करें "सामान्य" सेटिंग पैनल पर क्लिक करें 'स्क्रॉल बार दिखाएं' के लिए देखें और समाप्त होने पर "हमेशा" के बगल में रेडियोबॉक्स का चयन करें।

Comments

यह प्रश्न का उत्तर देता है, जैसे, लेकिन यह एक क्लाइंट साइड फिक्स है बजाय इसे सर्वर साइड फिक्स करने के। तो यह कुछ ऐसा है जो वेब पेज उपयोगकर्ता को करना है, स्टैकओवरफ़्लो एक प्रोग्रामिंग साइट है इसलिए लोग आमतौर पर उपयोगकर्ता के लिए अपने ब्राउज़र सेटिंग्स को बदलने के लिए एक तरह से कोड समाधान खोजने के लिए यहां आते हैं।

— एरिक लेसचिंस्की