सीएसएस का उपयोग करके एक लंबवत स्क्रॉल करने योग्य बनाना

Question

इस

<div id="" style="overflow:scroll; height:400px;">

यह बताता है divकि उपयोगकर्ता क्षैतिज और लंबवत दोनों तरह से स्क्रॉल कर सकता है। मैं इसे कैसे बदल सकता हूं ताकि div केवल अनुलंब रूप से स्क्रॉल हो?

Comments

नहीं है overflow-xऔर overflow-yCSS3, जो कर में आप क्या चाहते हैं।

— मार्क बी

Answer 1

आपने इसे गलत संपत्ति का उपयोग करने से अलग कर दिया है। स्क्रॉलबार किसी भी संपत्ति के साथ शुरू हो रहा जा सकता है overflow, overflow-xया overflow-yऔर प्रत्येक के किसी भी करने के लिए सेट किया जा सकता है visible, hidden, scroll, auto, या inherit। आप वर्तमान में इन दोनों को देख रहे हैं:

• auto- यह मान बॉक्स की चौड़ाई और ऊंचाई को देखेगा। यदि उन्हें परिभाषित किया जाता है, तो यह बॉक्स को उन सीमाओं से आगे नहीं बढ़ने देगा। इसके बजाय (यदि सामग्री उन सीमाओं से अधिक है), तो यह सीमा (या दोनों) के लिए एक स्क्रॉलबार बनाएगा जो इसकी लंबाई से अधिक हो।

• scroll- यह मान बलों एक स्क्रॉलबार, कोई फर्क नहीं पड़ता है, भले ही सामग्री सीमा सेट से अधिक नहीं है क्या,। यदि सामग्री को स्क्रॉल करने की आवश्यकता नहीं है, तो बार "अक्षम" या गैर-इंटरैक्टिव के रूप में दिखाई देगा।

यदि आप हमेशा वर्टिकल स्क्रॉलबार दिखाना चाहते हैं:

आपको उपयोग करना चाहिए overflow-y: scroll। यह एक स्क्रॉलबार को ऊर्ध्वाधर अक्ष के लिए प्रकट होने के लिए मजबूर करता है कि क्या इसकी आवश्यकता है या नहीं। यदि आप वास्तव में संदर्भ को स्क्रॉल नहीं कर सकते हैं, तो यह "अक्षम" स्क्रॉलबार के रूप में दिखाई देगा।

यदि आप केवल स्क्रॉलबार दिखाना चाहते हैं तो आप बॉक्स को स्क्रॉल कर सकते हैं:

बस उपयोग करें overflow: auto। चूंकि डिफ़ॉल्ट रूप से आपकी सामग्री अगली पंक्ति में तब टूटती है जब वह वर्तमान रेखा पर फिट नहीं हो सकती है, एक क्षैतिज स्क्रॉलबार नहीं बनाया जाएगा (जब तक कि यह उस तत्व पर न हो जिसमें वर्ड-रैपिंग अक्षम है)। ऊर्ध्वाधर पट्टी के लिए, यह सामग्री को आपके द्वारा निर्दिष्ट ऊंचाई तक विस्तार करने की अनुमति देगा। यदि यह उस ऊंचाई से अधिक है, तो यह बाकी सामग्री को देखने के लिए एक ऊर्ध्वाधर स्क्रॉलबार दिखाएगा, लेकिन यह ऊंचाई से अधिक नहीं होने पर स्क्रॉलबार नहीं दिखाएगा।

Comments

अतिप्रवाह का उपयोग करना: ऑटो किसी भी तरह पृष्ठ के निचले भाग में एक विशाल रिक्त स्थान बनाता है। क्या यह एक सामान्य घटना है?

— स्टुपिड.फैट.काट

Answer 2

ऐसे में कोशिश करें।

<div style="overflow-y: scroll; height:400px;">

Comments

अच्छा समाधान, लेकिन स्क्रॉल हमेशा ऊंचाई की परवाह किए बिना दिखाई देता है

— FindOutIslamNow

यदि आप 'ऑटो' के लिए अतिप्रवाह-y मान सेट करते हैं, तो स्क्रॉल परिभाषित ऊंचाई के बाद दिखाई देगा। उदाहरण के लिए <div style = "overflow-y: auto; height: 200">

— उमैर गुल

Answer 3

100% व्यूपोर्ट ऊंचाई के उपयोग के लिए:

overflow: auto;
max-height: 100vh;

Answer 4

overflow-y: auto;Div पर प्रयोग करें ।

साथ ही, आपको चौड़ाई भी निर्धारित करनी चाहिए।

Comments

चौड़ाई क्यों अनिवार्य है?

— लीजी

@LeeGee आपको गणना करने के लिए चौड़ाई की आवश्यकता है कि div की सामग्री div सीमाओं के बाहर गई है या नहीं और इस तरह स्क्रॉल को सक्षम करना है या नहीं।

— रॉबर्टो बोनीनी

क्या चौड़ाई 100% डिफ़ॉल्ट रूप से नहीं है?

— लीजी

@LeeGee नहीं, यह autoडिफ़ॉल्ट रूप से है। आमतौर पर, इसका मतलब है कि माता-पिता की चौड़ाई का 100%, लेकिन हमेशा नहीं।

— मदारा का भूत

Answer 5

आप इसके बजाय इस कोड का उपयोग कर सकते हैं।

<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">

ओवरफ्लो-एक्स : ओवरफ्लो-एक्स संपत्ति निर्दिष्ट करती है कि सामग्री के बाएं / दाएं किनारों के साथ क्या करना है - अगर यह तत्व के सामग्री क्षेत्र को ओवरफ्लो करता है।
ओवरफ्लो-वाई : ओवरफ्लो-वाई संपत्ति निर्दिष्ट करती है कि सामग्री के ऊपरी / निचले किनारों के साथ क्या करना है - यदि यह तत्व के सामग्री क्षेत्र को ओवरफ्लो करता है।

मान
दिखाई देते हैं : डिफ़ॉल्ट मान। सामग्री को क्लिप नहीं किया गया है, और इसे सामग्री बॉक्स के बाहर प्रदान किया जा सकता है।
छिपा हुआ : सामग्री को क्लिप किया गया है - और कोई स्क्रॉलिंग तंत्र प्रदान नहीं किया गया है।
स्क्रॉल : सामग्री को क्लिप किया गया है और एक स्क्रॉलिंग तंत्र प्रदान किया गया है।
ऑटो : ओवरबॉक्सिंग बॉक्स के लिए एक स्क्रॉलिंग तंत्र प्रदान किया जाना चाहिए।
प्रारंभिक : इस संपत्ति को उसके डिफ़ॉल्ट मूल्य पर सेट करता है।
यह संपत्ति अपने मूल तत्व से विरासत में मिली है।

Answer 6

आप overflow-y: scrollऊर्ध्वाधर स्क्रॉलिंग के लिए उपयोग कर सकते हैं ।

<div  style="overflow-y:scroll; height:400px; background:gray">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  
 </div>

Answer 7

मेरे लिए इन सभी उत्तरों के साथ समस्या यह थी कि वे उत्तरदायी नहीं थे। मुझे एक पैरेंट डिव के लिए एक निश्चित ऊंचाई तय करनी थी जो मैं नहीं चाहता था। मैं मीडिया के सवालों से घिरे हुए एक टन भी नहीं बिताना चाहता था। यदि आप कोणीय का उपयोग कर रहे हैं, तो आप बूटस्ट्रैप टैबसेट का उपयोग कर सकते हैं और यह आपके लिए पूरी मेहनत करेगा। आप आंतरिक सामग्री को स्क्रॉल कर पाएंगे और यह उत्तरदायी होगा। जब आप टैब सेटअप करते हैं, तो इसे इस तरह से करें: $scope.tab = { title: '', url: '', theclass: '', ative: true };... बिंदु यह है, आपको एक शीर्षक या छवि आइकन नहीं चाहिए। फिर इस तरह से टैब में टैब की रूपरेखा छिपाएँ:

.nav-tabs {
   border-bottom:none; 
} 

और यह भी .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;} और अंत में अदृश्य टैब को हटाने के लिए जिसे आप अभी भी क्लिक कर सकते हैं यदि आप इसे लागू नहीं करते हैं:.nav > li > a {padding:0px;margin:0px;}