2013-11-27 6 views
7

Fiddleसफेद कोनों वेबकिट-स्क्रॉलबार

मैं ::-webkit-scrollbar उपयोग कर रहा हूँ क्रोम में एक कस्टम स्क्रॉलबार बनाने के लिए। यह देखने के लिए के बाद से यह एक स्क्रॉलबार है थोड़े मुश्किल है

It's kinda hard to see

क्षमा करें,: मैं एक border-radius: 10px है और वह ऐसा करने में, वहाँ शीर्ष पर सफेद कोनों कर रहे हैं।

मैं चाहता हूं कि कोनों को हेडर div (#dadae3) के समान रंग होना चाहिए। स्क्रॉलबार की शैलियों को बदलने के बिना केवल सीएसएस का उपयोग करके सफेद कोनों से छुटकारा पाने का कोई तरीका है?

सीएसएस (पूरे):

body { 
    padding: 0; 
    margin: 0 
} 
::-webkit-scrollbar { 
    width: 13px; 
} 
::-webkit-scrollbar-track { 
    background: #ffffff; 
    border-radius: 10px; 
    border: 1px solid #aeaeb5 
} 
::-webkit-scrollbar-thumb { 
    background: #dadae3; 
    border-radius: 10px; 
    border: 1px solid #aeaeb5 
} 
::-webkit-scrollbar-thumb:hover { 
    background: #c4c4cc 
} 
::-webkit-scrollbar-thumb:active { 
    background: #aeaeb5 
} 

HTML:

<div style='background: #dadae3; width: 100%; height: 30px;'></div> 
<div style='width: 100%; height: 1000px'></div> 

उत्तर

18

आपको ::-webkit-scrollbar-corner छद्म-तत्व सेट करना होगा, उदा।

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); } 
+3

यह स्वीकार किया जाना चाहिए: भले ही यह 1+ साल देर हो, तो यह क्रोम 43 – Antoine

+0

में मेरे लिए एक ही समस्या को हल करता है। भले ही मैंने इस परियोजना को त्याग दिया, फिर भी यह बहुत उपयोगी है –

1

आप छद्म तत्व -webkit-scrollbar के लिए background-color संपत्ति सेट कर सकते हैं, कर आप "कोने रंग" सेट कर सकते हैं कि।

+0

हाँ, यह काम करता है। लेकिन जब आप नीचे स्क्रॉल करते हैं, तो यह सफेद के खिलाफ '# dadae3' दिखाता है। क्या मैं 'पृष्ठभूमि-रंग' पारदर्शी पर सेट करूंगा? संपादित करें: नहीं, मैं 'पृष्ठभूमि-रंग' को पारदर्शी नहीं रखूंगा। यह सफेद कोनों के रूप में भी दिखाता है। –

+0

यह पहले से ही पारदर्शी है (फिडलर के आउटपुट आईफ्रेम पर पृष्ठभूमि रंग देने का प्रयास करें), लेकिन याद रखें: यह एक स्क्रॉलबार है। अगर कुछ पीछे हो जाता है, तो यह स्क्रॉलिंग ट्रिगर करता है, इसलिए इसके पीछे कुछ नहीं हो सकता है। –

+0

ठीक है, मुझे संदेह है कि कोई भी स्क्रॉलबार पर ग्रे कोनों को नोटिस करेगा। अनुलेख यह शायद जल्द ही एक लाइव साइट पर जा रहा है (जैसे ही मैं अपना सर्वर काम कर रहा हूं>: डी) –

संबंधित मुद्दे