यदि कोई सामग्री ओवरफ्लो होती है, तो एक निश्चित स्थिति div को स्क्रॉल करने की आवश्यकता है


150

मेरे पास वास्तव में दो मुद्दे हैं, लेकिन प्राथमिक मुद्दे को पहले हल करने देता हूं क्योंकि मेरा मानना ​​है कि दूसरे को संबोधित करना आसान है।

मैं एक मेनू के लिए स्क्रॉल के बाईं ओर एक निश्चित स्थिति div है। दाईं ओर एक मानक div है जो ठीक से स्क्रॉल करता है। मुद्दा यह है कि जब ब्राउज़र व्यू-पोर्ट पूरे मेनू को देखने के लिए बहुत छोटा है .. तो इसे स्क्रॉल करने का कोई तरीका नहीं है कि मैं पा सकता हूं (कम से कम सीएसएस के साथ नहीं)। मैंने सीएसएस में अलग-अलग ओवरफ्लो का उपयोग करने की कोशिश की है, लेकिन कुछ भी div स्क्रॉल नहीं करता है। जिस मेनू में मेनू होता है, वह न्यूनतम-ऊंचाई: 100% और स्थिति: निश्चित होता है .. दोनों विशेषताओं को मुझे रखने की आवश्यकता होती है।

मेनू वाले div एक और आवरण div के अंदर है जो बिल्कुल और ऊंचाई 100% पर सेट है।

यदि सामग्री div के लिए बहुत अधिक है, तो मैं इसे लंबवत रूप से स्क्रॉल करने के लिए कैसे प्राप्त कर सकता हूं?

यह मुझे दूसरे मुद्दे पर ले जाता है, कि मैं एक स्क्रॉल बार प्रदर्शित नहीं करना चाहता .. लेकिन मुझे लगता है कि मेरे पास पहले से ही इसका जवाब हो सकता है (केवल यह अभी तक काम नहीं करता है क्योंकि मुझे स्क्रॉल करने के लिए div नहीं मिल सकता है शुरुआत के लिए)।

कोई उपाय? शायद जावास्क्रिप्ट की जरूरत है? (जिसके बारे में मुझे कम ही पता है)

जेएस फिडेल उदाहरण

और संबंधित कोड जो समस्या पैदा कर रहा है (चूंकि पूरी बात यहां पोस्ट करने में बहुत लंबा है)

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

ऊंचाई जोड़ने की भी कोशिश की: 100% के रूप में अच्छी तरह से देखने के लिए कि अगर यह एक मुद्दा था, लेकिन यह या तो काम नहीं किया ... और न ही एक निश्चित ऊंचाई, जैसे 600px।


कृपया HTML और सीएसएस के साथ एक jsfiddle पोस्ट करें जिसका आप वर्तमान में उपयोग कर रहे हैं ताकि हम इस मुद्दे को देख सकें। धन्यवाद!
माचिल

3
क्या आपने अतिप्रवाह की कोशिश की है: ऑटो; ?
दान

हाँ अतिप्रवाह: ऑटो या अतिप्रवाह-य: स्क्रॉल या अतिप्रवाह: सभी को स्क्रॉल करें निर्धारित फ़िक्स को स्क्रॉल करने की अनुमति न दें।
TCD फैक्ट्री

स्क्रॉल करने की आवश्यकता होने का कारण यह है कि यदि किसी div के पास परिभाषित लंबाई में TOO MUCH सामग्री है। यदि ब्राउज़र व्यू पोर्ट सिकुड़ता है जो कि किसी भी तरह से स्क्रॉलिंग एक्शन को लागू करने के लिए डिव का कारण नहीं बनेगा।
डैन

JSfiddle और html / css पोस्ट नहीं कर सकते क्योंकि यह अभी बहुत लंबा है और वे आपको कोड के बिना JSfiddle लिंक पोस्ट नहीं करने देते। :( मैंने सिर्फ उस कोड के टुकड़े को पोस्ट किया है जो div स्क्रॉल को मदद नहीं करता है .. और पूरी बात के लिए लिंक।
TCD Factory

जवाबों:


245

उपयोग करने height:100%में समस्या यह है कि यह विंडो के 100% के बजाय पृष्ठ का 100% होगा (जैसा कि आप शायद यह होने की उम्मीद करेंगे)। यह आपके द्वारा देखी जा रही समस्या का कारण बनेगा, क्योंकि बिना पट्टी वाली सामग्री एक स्क्रॉल पट्टी की आवश्यकता के बिना निर्धारित सामग्री को 100% ऊंचाई के साथ शामिल करने के लिए पर्याप्त लंबी है। ब्राउज़र यह नहीं जानता / परवाह करता है कि आप वास्तव में इसे देखने के लिए उस बार को स्क्रॉल नहीं कर सकते

आप यह करने के fixedलिए उपयोग कर सकते हैं कि आप क्या करने की कोशिश कर रहे हैं।

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

आपके फिडेल का यह कांटा मेरा फिक्स दिखाता है: http://jsfiddle.net/strider820/84AsW/1/


काम किया। मुझे एक कोडप्रॉप लेख के अनुकूलन के लिए इसकी आवश्यकता थी। कुछ को बाएं और दाएं सेट को 0 पर भी उपयोग करने की आवश्यकता हो सकती है। बहुत बहुत धन्यवाद, भाग्य
सैंटियागो बैजोरिया

19
यदि आप "ओवरफ्लो-वाई" को ऑटो पर सेट करते हैं, तो स्क्रॉल बार गायब हो जाएगा जब सामग्री व्यूपोर्ट के भीतर होगी। दूसरे शब्दों में, अगर यह ओवरफ्लो नहीं होता है, तो कोई स्क्रॉल बार नहीं होगा और जब यह ओवरफ्लो करता है, तो एक स्क्रॉलबार होगा।
ट्रेन

सही बात। मैं बस उसकी सीएसएस का उपयोग कर रहा था और ठीक कर रहा था जो वास्तव में टूट गया था। वह पहले से ही अपने सवाल में उस बिट का जवाब है, हालांकि लग रहा था।
स्ट्राइडर 820

3
काम किया! महान समाधान। मैं अभी भी नीचे नहीं मिलता है: 0 भाग .. क्या आप समझा सकते हैं pls ??
गियानलुका घेटिनी

5
ऊपर और नीचे
जोड़

6

यहाँ दोनों फिक्स हैं।

सबसे पहले, तय साइडबार के बारे में, आपको इसे अतिप्रवाह करने के लिए ऊंचाई देने की आवश्यकता है:

HTML कोड:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

सीएसएस कोड:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

लाइव उदाहरण: http://jsfiddle.net/RWxGX/3/

यदि आपकी सामग्री div की ऊँचाई को बढ़ा देती है, तो स्क्रॉल बार प्राप्त करना असंभव नहीं है। इसलिए मैंने स्क्रीन ऊंचाई के लिए मीडिया क्वेरी जोड़ी है। हो सकता है कि आप अपनी शैली को लघु स्क्रीन आकारों के लिए समायोजित कर सकें, इसलिए स्क्रॉल को प्रदर्शित होने की आवश्यकता नहीं है।

चीयर्स, इग्नासियो


जेएसफल्ड उदाहरण देखें जिसे मैंने पोस्ट किया था। आप मुद्दे को देखेंगे।
टीसीडी फैक्ट्री

यह पुराने ब्राउज़रों में काम नहीं करता है, जैसे कि आईओएस 4.2 के लिए मोबाइल सफारी
mheavers

4

आम तौर पर, निश्चित अनुभाग को width, heightऔर top, bottomगुणों के साथ सेट किया जाना चाहिए , अन्यथा यह इसके आकार और स्थिति को नहीं पहचान पाएगा।

यदि इस्तेमाल किया गया बॉक्स शरीर के लिए प्रत्यक्ष बच्चा है और उसके पड़ोसी हैं, तो यह जांच z-indexऔर top, leftगुणों के लिए समझ में आता है , क्योंकि वे एक-दूसरे को ओवरलैप कर सकते हैं, जो सामग्री को स्क्रॉल करते समय आपके माउस होवर को प्रभावित कर सकता है।

यहां एक सामग्री बॉक्स ( bodyटैग का एक सीधा बच्चा ) के लिए समाधान है जो आमतौर पर मोबाइल नेविगेशन के साथ उपयोग किया जाता है।

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

आशा है कि यह किसी को भी मदद करता है। धन्यवाद!


3

यहाँ समाधान मेरे लिए कारगर नहीं थे क्योंकि मैं प्रतिक्रिया घटकों को स्टाइल कर रहा हूँ।

हालांकि साइडबार के लिए क्या काम किया गया था

.sidebar{
position: sticky;
top: 0;
}

आशा है कि यह किसी की मदद करता है।


मैं सालों से CSS का संपादन कर रहा हूं और 'चिपचिपी स्थिति' विशेषता के बारे में कोई विचार नहीं था। इसके लिए धन्यवाद, मेरे कार्यान्वयन के लिए भी पूरी तरह से काम किया!
किलो मीटर 3

0

किसी के लिए भी कुछ ऐसा ही करने के लिए एक उत्तर छोड़ रहा है लेकिन एक क्षैतिज दिशा में, जैसे मैं चाहता था।

नीचे की तरह Tweaking @ strider820 का जवाब जादू करेगा:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

बस। इस टिप्पणी को भी देखें जहां @train ने overflow:autoओवर का उपयोग करके समझाया overflow:scroll

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.