네이버에서는 검색이 어려운 블로그입니다. 구글검색을 이용해 주세요.
https://css-tricks.com/examples/WebKitScrollbars/
오른쪽이나 아래에 나오는 스크롤바의 모양을 바꾸고 싶다.
Inset & Customized WebKit Scrollbar
/* For the "inset" look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
=========================================================
html {
overflow: auto;
}
body {
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
right: 1px;
padding: 1px;
overflow-y: scroll;
overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background: rgba(255,100,0,0.8);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,100,0,0.4);
}
'Web Source' 카테고리의 다른 글
| Reload parent page after submit (0) | 2015.09.04 |
|---|---|
| jquery $.ajax() $.ajaxsetup IE 한글 깨짐 (0) | 2015.08.20 |
| How do I check if file exists in jQuery or JavaScript? (0) | 2015.07.27 |
| Javascript getUTCHours, getUTCDay 세계 표준시 (0) | 2015.07.21 |
| Getting the value from a jQuery Mobile slider in 1.4.2 (0) | 2015.07.17 |
