"스크램블 된"웹킷 스크롤바 (Google + 스크롤바 재현 시도)

Question

내 사이트에 Google의 스크롤바를 재현하려고합니다. 이유는 내가 때로는이 스크롤바는 스크램블 모양을 알아낼 수 없습니다. 스크램블을하면 스크롤 막대가 여러 색상으로 표시되고 검은 색 선이 표시되며 scrollbar-thumb은 표시되지 않습니다. 여기에 내가 무슨 뜻인지를 보여주기 위해 스크린 샷입니다 :

여기 불행하게도, 스크롤이 정상 그래서 난 내 문제를 재현 할 수 없었던 보이는 jsfiddle입니다.

내 기존 CSS가이 문제를 일으킬 수 있다고 생각하면 도움이된다면 Twitter Bootstrap을 사용하고 있습니다.

Answer 1

이 스크롤 막대에 사용되는 코드는 아래의 코드를 참조하십시오 :

::-webkit-scrollbar { 
height: 16px; 
overflow: visible; 
width: 16px; 
} 
::-webkit-scrollbar-thumb { 
background-color: rgba(0,0,0,.2); 
background-clip: padding-box; 
border: solid transparent; 
border-width: 1px 1px 1px 6px; 
min-height: 28px; 
padding: 100px 0 0; 
box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07); 
::-webkit-scrollbar-button { 
height: 0; 
width: 0; 
} 

::-webkit-scrollbar-track { 
background-clip: padding-box; 
border: solid transparent; 
border-width: 0 0 0 4px; 
}