स्थिति पूर्ण अधिकार - कोई स्क्रॉलबार दृश्यमान

Question

जब मैं अपने रैपर को पूर्ण और दाएं स्थान पर रखता हूं तो खिड़की को कम करने पर कोई क्षैतिज स्क्रॉलबार ट्रिगर नहीं होता है।

उदाहरण: http://jsfiddle.net/Ue6aN/

कोड:

<div id="wrapper"></div> 


#wrapper { 
width: 400px; 
height: 400px; 
position: absolute; 
right: 20px; 
top: 0px; 
border: 1px solid red; 
} 

अगर मैं स्विच सही: 20px; छोड़ने के लिए: 20 पीएक्स; यह काम कर रहा है, लेकिन अन्यथा नहीं। जावास्क्रिप्ट के बिना इसे ठीक करने का कोई विचार?

Answer 1

समस्या यह है कि #wrapper के बाद कोई सामग्री नहीं है। क्षैतिज स्क्रॉल प्राप्त करने के लिए दस्तावेज़ के बाएं किनारे पर सामग्री को एंकर किया जाना चाहिए जो व्यूपोर्ट को संकुचित होने पर छुपाया जाता है, या कहा कि सामग्री व्यूपोर्ट चौड़ाई से अधिक है। चूंकि #wrapper सही फ़्लोटिंग है, यह असंभव है क्योंकि इसमें कोई बाएं तरफ एंकर पॉइंट नहीं है। :after हालांकि यह काम करता है।

#wrapper { float:right ... } 

body:after { 
    clear:right; 
    content:' '; 
    display:block; 
    height:1px; 
    min-width:420px 
} 

सीएसएस ऊपर body की सामग्री है, जो #wrapper है बाद में एक रिक्ति कहते हैं। वह स्थान कम से कम #wrapper के बॉक्स मॉडल की चौड़ाई है, लेकिन इसमें कोई फ्लोट नहीं है, और व्यूपोर्ट के बाएं किनारे पर लगी हुई है। तो ... जैसे ही इसका दायां किनारा छुपा हुआ है, क्षैतिज स्क्रॉलिंग ट्रिगर हो जाती है; इस प्रकार भ्रम दे रहा है कि #wrapper स्क्रॉल ईवेंट का कारण बन रहा है।

बेला: http://jsfiddle.net/jg3nH/

Answer 2

फ्लोट अधिकार का उपयोग करना मेरे लिए अधिक तार्किक होगा लेकिन आपको पूर्ण स्थिति की आवश्यकता है जिसमें आप युक्त तत्व की चौड़ाई या न्यूनतम चौड़ाई निर्धारित कर सकते हैं।

body { 
    position: relative; 
    height: 400px; //needs to be at least 1px 
    width: 100%; 
    min-width: 422px; // the width you'd like to horizontal scrollbar to appear 
}