कार्यक्षेत्र स्क्रॉलबार क्षैतिज स्क्रॉलबार

Question

मेरे सीएसएस इस तरह दिखता है की ओर जाता है। ऊंचाई ने अधिकतम तय किया है हालांकि: जैसे ही यह मान लंबवत स्क्रॉलबार दिखाई देता है। यह सब सुंदर सूजन काम करता है।

अब मुद्दा:
खड़ी स्क्रॉलबार दिखाई देते हैं, वे क्षैतिज स्थान की 10px चारों ओर, का उपयोग के रूप में स्क्रॉलबारdiv अंदर रखा जाएगा।
हालांकि, चौड़ाई लंबवत स्क्रॉलबार द्वारा उपयोग किए गए इन अतिरिक्त 10-कुछ पिक्सेल की अनुमति देने के लिए स्वत: सहेजा गया है। ऊर्ध्वाधर स्क्रॉलबार जोड़ने से पहले क्षैतिज चौड़ाई सामग्री के लिए बिल्कुल सही थी (width:auto सेटिंग से अपेक्षित), div अब भी क्षैतिज स्क्रॉलबार प्रदर्शित करता है - अनुपलब्ध 10 पिक्सेल की अनुमति देने के लिए। यह बेवक़ूफ़ी है।

• मैं इन क्षैतिज स्क्रॉलबार होने और बस खड़ी स्क्रॉलबार फिट बनाने के लिए div की चौड़ाई लपेटकर कैसे बच सकते हैं?

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

मैं अपने div करने के लिए एक padding-right : 15px कहा,:

Answer 1

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

अफसोस की बात है कि पाठ्यक्रम की पैडिंग भी तब दिखाई देती है जब कोई वर्टिकल स्क्रॉलिंग की आवश्यकता नहीं होती है, जिससे मेरा div केवल थोड़ा छोटा होता है ...:/ठीक है, मेरी आंखों में यह अभी भी अनियंत्रित क्षैतिज के लिए बेहतर है स्क्रॉलबार।

Answer 2

बस एक सुंदर पास योग्य समाधान (कम से कम इस समस्या के मेरे संस्करण के लिए) का पता लगाया।

मुझे लगता है कि width: auto के साथ समस्या यह है कि यह width: 100vw के समान व्यवहार करता है; समस्या यह है कि जब लंबवत स्क्रॉलबार प्रकट होता है, व्यूपोर्ट चौड़ाई वही रहता है (~ 10px स्क्रॉलबार के बावजूद), लेकिन देखने योग्य क्षेत्र (जैसा कि मैं इसे कॉल कर रहा हूं) 10px से कम हो गया है।

जाहिर प्रतिशत यह इस "देखने योग्य क्षेत्र" के रूप में परिभाषित करता है के द्वारा चौड़ाई को परिभाषित है, इसलिए करने के लिए अपने कोड को बदलने:

div.SOMECLASS { 
    position: absolute; 
    max-height: 300px 
    height: auto; 
    width: 100%; 
    overflow: auto; 
    ... 
} 

सामग्री ठीक से rescale के लिए अनुमति चाहिए!

पेज। आप इसके बजाय overflow-x: hidden जोड़ सकते हैं, जो लंबवत स्क्रॉलबार दिखाई देने पर क्षैतिज स्क्रॉलबार को दिखाई देने से रोक देगा, इसके बजाय बस अपने div के दाहिने तरफ से ~ 10px काट देगा।