वेबकिट-स्क्रॉलबार को div की सामग्री पर धक्का देने से कैसे रोकें?

Question

मैं वेबकिट-स्क्रॉलबार का उपयोग कर रहा हूं और स्टाइलिंग मुद्दों में चल रहा हूं क्योंकि वेबकिट स्क्रॉलबार बाईं ओर एक div की सामग्री को दबा रहा है जिससे सामग्री बहती है।

सूचना

• 1 बॉक्स डिफ़ॉल्ट ब्राउज़र स्क्रॉलबार उपयोग करता है और अतिप्रवाह नहीं करता है (अच्छा)
• 2 बॉक्स वेबकिट स्क्रॉलबार जो लेआउट को तोड़ने के समाप्त होता है उपयोग करता है। (बुरा/समस्या)

http://jsfiddle.net/ryeah/1/

कोई भी विचार मैं वेबकिट स्क्रॉलबार के साथ गलत क्या कर रहा div करने के लिए/अतिप्रवाह पैदा करने के लिए। हम दूसरे बॉक्स को कैसे ठीक कर सकते हैं? धन्यवाद

वेबकिट स्क्रॉलबार कोड:

.box2::-webkit-scrollbar { 
    height: 16px; 
    overflow: visible; 
    width: 16px; 
} 
.box2::-webkit-scrollbar-thumb { 
    background-color: rgba(0, 0, 0, .2); 
    background-clip: padding-box; 
    border: solid transparent; 
    border-width: 1px 1px 1px 6px; 
    min-height: 28px; 
    padding: 100px 0 0; 
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07); 
} 
.box2::-webkit-scrollbar-button { 
    height: 0; 
    width: 0; 
} 
.box2::-webkit-scrollbar-track { 
    background-clip: padding-box; 
    border: solid transparent; 
    border-width: 0 0 0 4px; 
} 
.box2::-webkit-scrollbar-corner { 
    background: transparent; 
} 

Answer 1

हम्म .. मैं एक तरह से ओवरले में वेबकिट स्क्रॉलबार पाने के लिए सोच भी नहीं सकते। लाइन तोड़ने को रोकने के लिए एक समाधान के साथ

.box2::-webkit-scrollbar { 
    height: 16px; 
    overflow: visible; 
    width: 16px; 
    display: none; 
} 

अन्य आप इस बॉक्स के रूप में ही करने के लिए अपने यूएल की चौड़ाई निर्धारित कर सकते हैं तो यह स्क्रॉलबार तहत अतिप्रवाह समारोह और प्रदर्शित करता है का उपयोग करता है स्क्रॉलबार को छिपाने के लिए है

.box ul { 
    width: 149px; 
} 

Answer 2

क्या आपने पैरेंट div में overflow-y:overlay डालने का प्रयास किया था? यह क्रोम में मेरे लिए काम करता है। This page का कहना है कि यह सफारी में भी काम करता है।

Answer 3

स्क्रॉल बार को div के बाहर प्रदर्शित करने का एक तरीका है।

स्थिर चौड़ाई का उपयोग करें और div स्थिति को पूर्ण के रूप में रखें। मेरे लिये कार्य करता है।

#divID{ 
overflow: hidden; 
width: calc(1024px + 0); 
} 

#divID:hover{ 
overflow-y:scroll; 
} 

यह डोम को मूर्ख बनाता है।