वर्टिकल स्क्रॉलबार की क्षतिपूर्ति कैसे करें जब यह अभी तक मौजूद नहीं है

Question

शायद यह एक आसान फिक्स है, लेकिन यह मुझे लंबे समय तक पागल कर रहा है इसलिए मैंने अंततः यह देखने का फैसला किया कि कोई समाधान मौजूद है या नहीं।

बस शब्दों में कहें, मैं अपने अधिकांश वेब पेजों को व्यापक दृश्य-बंदरगाहों में केंद्रित करता हूं।

उदाहरण, एक व्यू-पोर्ट 1028px करने में सक्षम हो सकता है और मैं चाहता हूं कि मेरा पृष्ठ चौड़ाई केवल 960px हो।

तो मेरी सीएसएस इस तरह दिखता है:

#pageWrapper { /* page width is 960 pixels */ 
    margin:0 auto; 
    width:960px; 
} 

उस के साथ कोई समस्या नहीं है।

समस्या तब होती है जब मैं एक गतिशील पृष्ठ शुरू करता हूं जो कि ऊंचाई की तुलना में छोटा होता है और फिर मेरा पृष्ठ स्क्रीन के नीचे नीचे (jQuery स्लाइडऑट, आदि के माध्यम से) फैलाता है और लंबवत स्क्रॉलबार प्रकट होता है।

यह स्लाइड के दौरान पेज फ्लिकर को छोड़कर समाप्त होता है और फिर स्लाइड के दौरान दाएं झिलमिलाहट करता है।

क्या सीएसएस के माध्यम से 20px दाएं मार्जिन को मजबूर करने के लिए कोई तरीका है और अभी भी margin:0 auto; का लाभ उठाएं?

धन्यवाद।

Answer 1

जब पृष्ठ की सामग्री लंबवत रूप से फिट नहीं होती है, तो ब्राउज़र विंडो के दाईं ओर एक स्क्रॉलबार जोड़ता है। यह ब्राउज़र विंडो में उपलब्ध चौड़ाई को बदलता है, इसलिए खिड़की के दाहिने तरफ से संबंधित या तो किसी भी सामग्री को केंद्रित या स्थानांतरित किया जाता है, जो थोड़ा सा बाएं स्थानांतरित हो जाएगा। यह बहुत आम है।

इसे नियंत्रित करने के कई तरीके हैं, लेकिन सबसे सामान्य यह है कि इसे बनाने के लिए हमेशा आपके पास स्क्रॉलबार हो या विंडो पर overflow-y संपत्ति को नियंत्रित करके स्क्रॉलबार न हो।

overflow-y: scroll सेट करना स्क्रॉलबार को हमेशा वहां रहने के लिए मजबूर करेगा।

overflow-y: hidden सेट करना कभी भी स्क्रॉलबार नहीं होने के लिए मजबूर होगा।

Answer 2

एनबी: overflow-y: hidden उपयोगकर्ता को किसी भी माध्यम से नीचे स्क्रॉल करने से रोकता है, जो कम व्यूपोर्ट के नीचे किसी भी सामग्री को प्रभावी ढंग से प्रस्तुत करता है।