वेबकिट-स्क्रॉलबार अंगूठे

Question

मुझे लगता है कि क्रोम और सफारी में काम करता है एक कस्टम स्क्रॉलबार ऊपर शैली कोशिश कर रहा हूँ की चौड़ाई सेट करने में असमर्थ।

::-webkit-scrollbar { 
    width: 15px; 
} 

::-webkit-scrollbar-track { 
    background-color: rgba(100, 100, 100, .5); 
    width: 15px; 
} 

::-webkit-scrollbar-thumb { 
    background-color: #818B99; 
    border-radius: 9px; 
    width: 9px; 
} 

हालांकि -webkit-scrollbar-thumb पर width पर ध्यान नहीं दिया जा रहा है: मैं निम्नलिखित सीएसएस कोशिश की है। मैं अंगूठे को ट्रैक के मुकाबले पतला होना चाहूंगा।

ऐसा प्रतीत होता है कि ट्रैक के समान रंग के साथ 312x के -webkit-scrollbar-thumb पर सीमा निर्धारित करके मैं चौड़ाई नकली कर सकता हूं, हालांकि यह केवल एक अपारदर्शी पृष्ठभूमि रंग के साथ काम करता है, और मुझे इसे पारदर्शी रंग के साथ काम करने की आवश्यकता है ऊपर के रूप में ट्रैक।

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

Answer 1

आप सही वेबकिट स्क्रॉलबार अंगूठे पर चौड़ाई घोषणा पर ध्यान नहीं देता है। यह ट्रैक पर भी नजरअंदाज करता है।

border का उपयोग करने में समस्या यह है कि यह अंगूठे के भीतर सीमा खींचती है, इसलिए यदि आप रंग transparent रंग बनाते हैं, तो यह काम नहीं करेगा।

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

::-webkit-scrollbar-thumb { 
    background-color: #818B99; 
    border: 3px solid transparent; 
    border-radius: 9px; 
    background-clip: content-box; 
} 

देखें http://jsfiddle.net/L6Uzu/3/

यह क्रोम में ठीक से काम करता है, लेकिन एक बॉर्डर-त्रिज्या कार्यान्वयन उन्नत के रूप में सफारी नहीं है तो,: तो फिर तुम सिर्फ एक 3px पारदर्शी सीमा बनाने के लिए है, तो बॉब अपने चाचा की जरूरत है गोलाकार कोनों दिखाई नहीं दे रहे हैं।