웹킷 스크롤바 스타일을 지정된 요소에 적용

웹킷 스크롤바 스타일을 지정된 요소에 적용

---

이중 콜론 접두사가 붙은 의사 요소를 처음 사용합니다. 일부 웹킷 전용 CSS를 사용하여 스크롤바의 스타일을 설명하는 블로그 기사를 보았습니다. 의사 요소 CSS를 식별 요소에 적용 할 수 있습니까?

/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
    width: 12px;
}

/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
    width: 12px;
}

이 바이올린에서는 div의 스크롤바를 사용자 지정하고 싶지만 기본 창의 스크롤바는 계속 유지됩니다.

http://jsfiddle.net/mrtsherman/4xMUB/1/

---

당신의 생각이 맞았습니다. 그러나 div ::-webkit-scrollbar공백이 있는 표기법 div은 실제로 div *::-webkit-scrollbar; 이 선택기는 "내부 요소의 스크롤바"를 의미 <div>합니다. 사용 div::-webkit-scrollbar.

http://jsfiddle.net/4xMUB/2/ 에서 시험보기

---

사용자 정의 스크롤바를 사용하기 위해 클래스 선택기를 사용하고 싶습니다.

어떻게 .foo::-webkit작동하지 않지만 작동한다는 것을 div.foo::-webkit! 그 ## $$ * ## 의사 물건 ....

http://jsfiddle.net/QcqBM/16/ 참조

---

요소의 ID로 설치 규칙을 적용 할 수도 있습니다. ID "myDivId"가있는 div의 스크롤 막대에 스타일을 지정해야 가정 해 보겠습니다. 그런 다음 다음을 수행 할 수 있습니다. 이렇게하면 다른 요소의 스크롤 막대에 다른 스타일을 사용할 수 있습니다.

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

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

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

http://jsfiddle.net/QcqBM/516/

참고 URL : https://stackoverflow.com/questions/7743840/apply-webkit-scrollbar-style-to-specified-element