jquery olmadan özel kaydırma çubuğu

Jquery olmadan çalışan özel bir kaydırma çubuğu arıyorum. JQuery'yi kullanamıyorum çünkü diğer şeyler de aynı zamanda şıktır ve hızlı yükleme için optimize edilmiştir.jquery olmadan özel kaydırma çubuğu

Benimle paylaşılan herhangi bir fikir için minnettar olurdum. NONNNNN

kaynak

2013-07-16 nonnnnn

Özelleştirmek istediğiniz kaydırma çubuğu hakkında bilgi verin. Sadece CSS ile bazı şeyler yapabilirsiniz. – bengoesboom

Evet, webkit kaydırma çubuklarını sadece css ile değiştirebileceğimi biliyorum. ama sadece tarzdan biraz daha fazlasına ihtiyacım var. kaydırma çubuğu, android veya ios gibi içeriğin üzerinde olmalıdır. İşte benim yanıta bakın – nonnnnn

: http://stackoverflow.com/questions/27322881/how-can-i-create-a-simple-page-vertical-scroll-bar-without-using-jquery/28666991#28666991 – AdamSchuld

sen hep CSS çalışabilir jQuery kullanmak istemiyorsanız

(sadece WebKit çalışır).

JSFIDDLE

Örnek CSS:

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

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #000000; 
} 

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

::-webkit-scrollbar-button { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background-color: #000000; 
    background-image: url(dark/light-blue/images/ui-icons_0990fb_256x240.png); 
} 

::-webkit-scrollbar-button:vertical:increment { 
    background-position: -64px -16px; 
} 

::-webkit-scrollbar-button:vertical:decrement { 
    background-position: 0 -16px; 
} 

::-webkit-scrollbar-button:horizontal:increment { 
    background-position: -32px -16px; 
} 

::-webkit-scrollbar-button:horizontal:decrement { 
    background-position: -96px -16px; 
} 

::-webkit-scrollbar-corner { 
    background-color: #000000; 
}

jquery olmadan özel kaydırma çubuğu

cevap

İlgili konular