사용자 정의 스크롤바를 사용하여 텍스트를 포함 하시겠습니까?

멋진 스크롤바를 수정했습니다. 중간에 있어야 할 텍스트가 필요 했으므로 프레임과 같습니다 ... 누군가의 서비스 이용 약관을 수락 할 때처럼. 텍스트를 추가하려고했지만 작동하도록 할 수 없습니다. 그냥 댓글을 추가 질문이있는 경우 http://jsfiddle.net/Hunter4854/RHMCm/하지 아래로 투표를주세요, 나는 대답한다 :사용자 정의 스크롤바를 사용하여 텍스트를 포함 하시겠습니까?

출처

2012-05-01 Hunter Mitchell

당신이 스크린 샷/이미지는 당신이 원하는 것을 보여주는 추가 할 수 있습니다 어떻게 생겼어? –

미안하지만 어떻게해야할지 모르겠다. –

<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/

출처

2012-05-01 16:03:01 Enve

사용자 정의 스크롤바를 사용하여 텍스트를 포함 하시겠습니까?

답변

관련 문제