2014-03-29 3 views
0

자바 스크립트로 맞춤 스크롤 막대를 편집 할 수 있습니까?자바 스크립트로 맞춤 스크롤 막대 편집?

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

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 1px 1px 6px 1px grey; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
} 

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    background: yellow; 
    -webkit-box-shadow: inset 1px 1px 6px 1px rgba(0, 0, 0, 0.5); 
} 

::-webkit-scrollbar-thumb:window-inactive { 
    background: #000000; 
} 


그래서 (작동하지 않습니다)처럼 스크롤을 변경 :


내 사용자 정의 스크롤입니다

jQuery('::-webkit-scrollbar').css('width', '120px'); 
jQuery('::-webkit-scrollbar-thumb').css('background', 'orange'); 

또는

,
document.body.scrollbar.style.width = '120px'; 
document.body.scrollbar.thumb.style.background = 'orange'; 


은 어떻게이 일을 가야합니까? 고맙습니다.

+0

내가 뭘하려고하는지 마우스를 가리키면 반응하는 사용자 지정 스크롤바를 만들려고합니다. 마우스가 스크롤 바 위로 마우스를 가져 가면 너비가 증가하므로 사용자가 스크롤 막대 썸을 드래그하는 것이 더 쉽습니다. – usandfriends

답변

0

연구 시간이 지나자 브라우저의 기본 스크롤 막대를 자바 스크립트로 편집하는 것이 불가능하다는 것을 알게되었습니다.

실용 가능하다고 판단한 유일한 해결책은 jScrollPane 및 jQuery의 .hover() 기능을 사용하여 사용자 정의 html 스크롤 막대를 편집하는 것입니다.

사용자 정의 html 스크롤바에 CSS를 적용하여 브라우저의 defalt 스크롤바 + 자바 스크립트 편집과 같은 효과를 낼 수도 있습니다. 예 : here

관련 문제