गोलाकार कोनों और आंतरिक स्क्रॉलबार के साथ डीवी

Question

मैं एक ऐसे परिदृश्य को प्राप्त करने का प्रयास कर रहा हूं जहां एक डीआईवी में आंतरिक स्क्रॉल बार और गोलाकार कोनों हैं। मेरी पहली इस के परिणामस्वरूप का प्रयास किया:

दाहिने हाथ कोने, वर्ग बन स्क्रॉल बार के कारण।

अगला, मैंने स्क्रॉलबार को नीचे धक्का देने और गिनती सीमाओं को बनाए रखने के लिए कुछ शीर्ष और नीचे पैडिंग के साथ एक आंतरिक div जोड़ा। यही कारण है कि इस तरह से बाहर आ गया:

मैं एक संकर जहां स्क्रॉल बार div की पूरी लंबाई हैं, लेकिन कोनों वर्ग नहीं कर सकता हूँ चाहते हैं। क्या यह संभव है?

Answer 1

आपको एक कस्टम स्क्रॉलबार आज़माएं। अपने स्क्रीनशॉट पर आप ओएस एक्स सिस्टम पर हैं, लेकिन आईई (विंडोज़) के साथ यह भयानक होगा।

this stackoverflow question पर एक नज़र डालें।

Answer 2

आप स्क्रॉलबार (scrollbar-thumb) के आस-पास के कंटेनर (scrollbar-track) border-radius का उपयोग कर सकते हैं।

उदाहरण:

::-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); 
} 

jsFiddle: http://jsfiddle.net/p2bWf/

स्रोत: http://css-tricks.com/custom-scrollbars-in-webkit/