2012-05-01 3 views
1

Я отредактировал несколько классных полос прокрутки. Мне нужен был текст, чтобы быть посередине, так что это похоже на фрейм ... как вы видите, когда принимаете какие-то условия обслуживания и прочее. Я попытался добавить текст, но я не могу заставить его работать? http://jsfiddle.net/Hunter4854/RHMCm/ Пожалуйста, не вниз голосование, если у вас есть вопрос, просто добавьте комментарий, и я отвечу :)Использование пользовательских полос прокрутки для размещения текста?

+1

Не могли бы вы добавить скриншот/изображение, показывающее, что вы хотите его выглядит как? –

+0

извините, я понятия не имею, как это сделать ... –

ответ

1
<head> 
<meta content="en-us" http-equiv="Content-Language"> 
<style>body { 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: green; 
} 

.a::-webkit-scrollbar { 
    width: 15px; 
    height: 15px; 
} 

.a::-webkit-scrollbar:vertical { 
    background: -webkit-linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */ 
} 

.a::-webkit-scrollbar:horizontal { 
    background: -webkit-linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */ 
} 

.a::-webkit-scrollbar-track:vertical { 
    background: -webkit-linear-gradient(left, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(left, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* W3C */ 
    border-radius: 15px; 
} 

.a::-webkit-scrollbar-track:horizontal { 
    background: -webkit-linear-gradient(top, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(top, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* W3C */ 
    border-radius: 15px; 
} 

.a::-webkit-scrollbar-thumb { 
    border-radius: 15px; 
    border: 1px solid black; 
} 

.a::-webkit-scrollbar-thumb:vertical { 
    background: -webkit-linear-gradient(left, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(left, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* W3C */ 
} 

.a::-webkit-scrollbar-thumb:horizontal { 
    background: -webkit-linear-gradient(top, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(top, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* W3C */ 
} 

.a::-webkit-scrollbar-thumb:hover { 
} 

.a::-webkit-scrollbar-corner { 
    background: black; 
} 

.a::-webkit-scrollbar-button:vertical { 
    background: -webkit-linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */ 
} 

.a::-webkit-scrollbar-button:horizontal { 
    background: -webkit-linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */ 
} 
​</style> 



</head> 



<div class="a" style="position:absolute;width:200px;height:200px;background:white;overflow-y:scroll"> 
    </div> 

Посмотри здесь http://jsfiddle.net/3uTjv/

Смежные вопросы