एक div

Question

पर CSS3 स्क्रॉलबार स्टाइलिंग मैं CSS3 के साथ वेबकिट स्क्रॉलबार कैसे स्टाइल कर सकता हूं?

मेरा मतलब है इन गुणों

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

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

यहाँ मेरी div टैग

<div class="scroll"></div> 

है यहाँ मेरी वर्तमान सीएसएस

.scroll { 
    width: 200px; height: 400px; 
    overflow: hidden; 
} 

Answer 1

स्थापना overflow: hidden छुपाता स्क्रॉलबार है। यह सुनिश्चित करने के लिए कि स्क्रॉलबार हर समय दिखाई देता है, overflow: scroll सेट करें।

::webkit-scrollbar संपत्ति का उपयोग करने के लिए, बस इसे कॉल करने से पहले .scroll पर लक्षित करें।

.scroll { 
    width: 200px; 
    height: 400px; 
    background: red; 
    overflow: scroll; 
} 
.scroll::-webkit-scrollbar { 
    width: 12px; 
} 

.scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

.scroll::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
​ 

आप overflow: hidden स्थापित कर रहे हैं देखें इस लाइव example

Answer 2

.scroll { 
    width: 200px; height: 400px; 
    overflow: auto; 
} 

Answer 3

। यह <div> के लिए बहुत बड़ा है, जिसका अर्थ है स्क्रॉलबार नहीं दिखाए जाएंगे। अपने <div> एक स्पष्ट चौड़ाई और/या ऊंचाई दो, और बदल overflowauto रहे हैं:

.scroll { 
    width: 200px; 
    height: 400px; 
    overflow: scroll; 
} 

आप केवल एक स्क्रॉलबार को दिखाने के लिए है, तो सामग्री <div> से अधिक लंबी है चाहते हैं, overflow: auto को overflow बदल जाते हैं। आप overflow-y या overflow-x का उपयोग करके केवल एक स्क्रॉलबार दिखा सकते हैं।

Answer 4

सीएसएस 3 स्क्रॉल बार के साथ समस्या यह है कि, बातचीत केवल सामग्री पर ही की जा सकती है। हम स्पर्श उपकरणों पर स्क्रॉल बार के साथ बातचीत नहीं कर सकते हैं।