क्या वेबकिट ब्राउज़र में पारदर्शी कस्टम स्क्रॉलबार ट्रैक बनाने का कोई तरीका है?

Question

मैं स्क्रोलबार स्टाइल करने की कोशिश कर रहा हूं जो डीआईवी पर एक डिजाइन में दिखाई देगी जो मैं काम कर रहा हूं। यह वेबकिट केवल इतना ही लगा है कि मैं प्लगइन की बजाय सिर्फ सीएसएस के साथ काफी रास्ता प्राप्त कर सकता हूं।

दुर्भाग्यवश मैंने एक प्रमुख मुद्दा मारा है। डिज़ाइन के लिए स्क्रॉलबार को पारदर्शी प्रभाव के साथ सामग्री को ओवरलैप करने की आवश्यकता होती है, ओएस एक्स माउंटेन शेर/आईओएस की तरह।

जब स्क्रॉलबार पर कस्टम शैलियों को लागू किया जाता है, तो यह स्क्रॉलबार में फिट करने के लिए सामग्री का आकार बदलता है। मैंने सामग्री को आकार देने में कामयाब रहा है ताकि इंस्पेक्टर में यह अब स्क्रॉलबार के नीचे दिखाए, लेकिन मैं प्रतीत नहीं कर सकता स्क्रॉलबार ट्रैक पारदर्शी बनाने के लिए।

मैं दोनों :: करने के लिए इन लागू करने की कोशिश की है - वेबकिट-स्क्रॉलबार और :: - वेबकिट-स्क्रॉलबार ट्रैक क्षेत्रों:

• पृष्ठभूमि: पारदर्शी
• RGBA के साथ पारदर्शी पृष्ठभूमि रंग
• पारदर्शीता के साथ एक पृष्ठभूमि छवि

कोई भी काम नहीं कर रहा है। छोड़ने से पहले और एक जावास्क्रिप्ट कस्टम स्क्रॉलबार समाधान आज़माएं, सोचा कि मैं देखता हूं कि किसी और के पास जवाब है या नहीं।

* { 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
body { 
 
    padding:20px; 
 
} 
 
#content { 
 
    background:#333; 
 
    height:400px; 
 
    padding:1px; 
 
    width:398px; 
 
} 
 
#content li { 
 
    background:#666; 
 
    height:100px; 
 
    margin-bottom:10px; 
 
    width:400px; 
 
} 
 
.scrollable-content { 
 
    overflow-x:hidden; 
 
    overflow-y:scroll; 
 
} 
 
.scrollable-content::-webkit-scrollbar { 
 
    background:transparent; 
 
    width:30px; 
 
} 
 
.scrollable-content::-webkit-scrollbar-track { 
 
    background:transparent; 
 
} 
 
.scrollable-content::-webkit-scrollbar-thumb { 
 
    background:#999; 
 
}

<ol class="scrollable-content" id="content"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ol>

मैं इन पहले से ही देख लिया है:

webkit css scrollbar styling

How to prevent a webkit-scrollbar from pushing over the contents of a div?

CSS: Possible to "push" Webkit scrollbars into content?

Answer 1

मैं मैं एक ही समस्या का समाधान करने की कोशिश कर रहा हूँ

.scrollable-content::-webkit-scrollbar * { 
    background:transparent; 
} 
.scrollable-content::-webkit-scrollbar-thumb { 
    background:#999 !important; 
}