...

Custom Scrollbar ์คํ์ผ๋ง
์ ํ๋ธ ํํ์ด์ง๋ฅผ ๋ณด๋ฉด ์คํฌ๋กค๋ฐ๊ฐ ์ผ๋ฐ ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ์๋ ๋ฌ๋ฆฌ ๋๊ทธ๋๊ฒ ์คํ์ผ๋ง ๋์ด ์์์ ๋ณผ ์ ์๋ค. ์ด์ฒ๋ผ ์คํฌ๋กค๋ฐ ์ญ์ ๋ค๋ฅธ ์์์ฒ๋ผ CSS ์คํ์ผ๋ง์ด ๊ฐ๋ฅํ์ฌ, ๋ณด๋ค ์์ ์ ์น์ฌ์ดํธ ๋๋ณด์ผ ์ ์๊ฒ ํ์ฌ ๋ฐฉ๋ฌธ์์๊ฒ ์กฐ๊ธ ๋ ๊ธฐ์ต์ ๋จ๊ฒ ๋ง๋ค ์ ์๋ค.

๋ค๋ง ์คํฌ๋กค๋ฐ ์์๋ ์น ์ฝํ ์ธ ๊ฐ ์๋ ๋ธ๋ผ์ฐ์ ๋ด๋ถ ์ธํฐํ์ด์ค๋ก ์ทจ๊ธ๋๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ์ ์ธ css ์ฌ์ฉ์ ์์ด ๊ธฐ๋ฅ์ด ์ ํ์ ์ธ ๊ฒ์ด ๋ง๋ค. ์ฐ๋ฆฌ๊ฐ ๋ธ๋ผ์ฐ์ ์ alert ์ฐฝ์ ์คํ์ผ๋ง ํ ์ ์๋ฏ์ด ๋ง์ด๋ค. ์ฆ, css๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ ์๊น์ด๋ ๋๊ป๋ฅผ ๋ฐ๊ฟ ์๋ ์์ผ๋ ์ด์ธ์ ๋ณต์กํ ์คํ์ผ๋ง์๋ ์ ํ์ ์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
ํนํ ์ ์ํด์ผ ํ ์ ์ CSS scrollbar ๊ด๋ จ ์ ํ์๋ค์ ํ์ค์ด ์๋๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ๋ง๋ค ๋ฌธ๋ฒ ์ ์ฉ์ด ๋ค๋ฅด๋ค๋ ์ ์ด๋ค. ๋์ฒด์ ์ผ๋ก ๋๊ฐ์ง ์์์ผ๋ก ๋๋๋๋ฐ, WebKit ๊ธฐ๋ฐ ๋ธ๋ผ์ฐ์ (Chrome, Edge, Opera, Safari, iOS ๋ธ๋ผ์ฐ์ ) ์ IE์ ํ์ด์ดํญ์ค ๋ธ๋ผ์ฐ์ ๋ก ๋๋๋ค.
webkit ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ ์์ฑ

- ::-webkit-scrollbar : ์คํฌ๋กค๋ฐ ์ ์ฒด
- ::-webkit-scrollbar-thumb : ๋๋๊ทธ ๊ฐ๋ฅํ ์คํฌ๋กค ํธ๋ค ๋ง๋
- ::-webkit-scrollbar-track : ์คํฌ๋กค๋ฐ ํธ๋ (์คํฌ๋กค์ด ์์ง์ด๋ ์์ญ / ์คํฌ๋กค ์งํ๋ฅ ํ์์ค)
- ::-webkit-scrollbar-button : ์คํฌ๋กค๋ฐ์ ๋ฐฉํฅ ๋ฒํผ (= ์/์๋ ํ์ ํ์ดํ)
- ::-webkit-scrollbar-track-piece : ์คํฌ๋กค ์งํ๋ฅ ํ์์ค์์ ์คํฌ๋กค ํธ๋ค ๋ง๋ ๋ถ๋ถ์ ์ ์ธํ ๋จ์ ๋น ๊ณต๊ฐ
- ::-webkit-scrollbar-corner : ์ํ/์์ง ์คํฌ๋กค ๋ง๋๊ฐ ๋ง๋๋ ์คํฌ๋กค ๋ง๋์ ํ๋จ ๋ชจ์๋ฆฌ
- ::-webkit-resizer : ์์์ ํ๋จ ๋ชจ์๋ฆฌ์ ๋ํ๋๋ ํฌ๊ธฐ ์กฐ์ ํธ๋ค
::-webkit-scrollbar ์ ํ์์ ๋ํด์ IE์ ํ์ด์ดํญ์ค ์ ์ธํ ์ฃผ์ ์ต์ ๋ธ๋ผ์ฐ์ ๋ชจ๋ ์ง์ํ๋ค๊ณ ๋ณด๋ฉด ๋๋ค. ์ฌ๋๋ค์ด ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ฝ๋๋ค๋ฉด ํฌ๋กฌ๊ณผ ์ฃ์ง, ์จ์ผ ์ผํ
๋ ์คํฌ๋กค๋ฐ๋ฅผ ์คํ์ผ๋ง ํ ๊ฒฝ์ฐ๊ฐ ์๊ธธ๊ฒฝ์ฐ ์ ๋งํ๋ฉด ์ด ์์ฑ์ ์ด์ฉํ๋ฉด ๋๋ค.
/* Chrome, Whale, Edge */
/* ์คํฌ๋กค๋ฐ ์ ์ฒด ๊ธฐ๋ณธ ๊พธ๋ฏธ๊ธฐ */
body::-webkit-scrollbar {
...
}
/* ์คํฌ๋กค๋ฐ ๋ง๋ ๊พธ๋ฏธ๊ธฐ */
body::-webkit-scrollbar-thumb {
...
}
/* ์คํฌ๋กค๋ฐ ํธ๋ ๊พธ๋ฏธ๊ธฐ */
body::-webkit-scrollbar-track {
...
}
Firefox ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ ์์ฑ
๋ชจ์ง๋ผ ํ์ด์ดํญ์ค๋ Webkit๊ณผ๋ ๋ฌ๋ฆฌ ์๋์ ๊ฐ์ด ๋ ๊ฐ์ง ์คํ์ผ ์์ฑ๋ง ์ค์ ์ด ๊ฐ๋ฅํ๋ค.
- scrollbar-width : ์คํฌ๋กค๋ฐ์ ํฌ๊ธฐ๋ฅผ ์กฐ์ (auto, none, thin)
- scrollbar-color : ์คํฌ๋กค๋ฐ์ Thumb๊ณผ Track์ ๋ํ ์คํ์ผ ์ง์

/* Firefox */
body {
scrollbar-width: thin;
scrollbar-color: black white; /* ๊ฒ์์ Thumb ์ ํฐ์ Track */
}
IE ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ ์์ฑ
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ ๋ธ๋ผ์ฐ์ ๋ ๋ ์ ํ์ ์ด๋ค. ํฌ๊ธฐ๋ ๋ฌผ๋ก ๋๋ถ๋ถ์ ๊ฐ์ ์กฐ์ ํ ์ ์์ผ๋ฉฐ ๊ฐ๋จํ ์ ๋ณ๊ฒฝ ๋ฑ๋ง ๊ฐ๋ฅํ๋ค.

/* IE */
body{
scrollbar-base-color: #000;
scrollbar-face-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-highlight-color: #000;
scrollbar-track-color: #000;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #000;
scrollbar-dark-shadow-color: #000;
}
webkit ์คํฌ๋กค๋ฐ ์์ฑ ์ ๋ฆฌ
์ฒ์ 7๊ฐ์ง ์คํฌ๋กค๋ฐ ์์ฑ์ ๋ณด๋ฉด ๋ญ๊ฐ ๋ญ์ง ๊ต์ฅํ ๋ํดํ๊ธฐ๋ ํ๊ณ ์ด๋ ต๋ค. ๋ฐ๋ผ์ ์ฃผ์ํ ๋ช๊ฐ์ง ์์ฑ๋ค์ ์ฐจ๊ทผ์ฐจ๊ทผ ์ ๋ฆฌํด๊ฐ๋ฉฐ ์ฌ์ฉ๋ฒ์ ์ตํ๋ณด๋๋ก ํ์.
::-webkit-scrollbar
์ปค์คํ ์คํฌ๋กค๋ฐ ์คํ์ผ๋ง์ ํ๊ฒ ๋ค๋ ๊ธฐ๋ณธ ์์ฑ ์ด๋ค. ์ด ์ค์ ์ด ์์ผ๋ฉด ๋ค๋ฅธ ๋ชจ๋ ๊ฒ์ ๋นํ์ฑํ ๋๋ค.
/* ์คํฌ๋กค๋ฐ ์ ์ฒด ์์ญ */
::-webkit-scrollbar {
width: 10px; /* ์ธ๋ก์ถ ์คํฌ๋กค๋ฐ ํญ ๋๋น */
height: 20px; /* ๊ฐ๋ก์ถ ์คํฌ๋กค๋ฐ ํญ ๋๋น */
}
์ด๋ ์์ ์์ญ์ด ์คํฌ๋กค๋ง ๊ธฐ๋ฅ์ ์ฌ์ฉํ๋๋ก ์ง์ ํ๋ ๊ฒ์ ์์ง๋ง์.
div {
overflow-x: scroll; /* ๊ฐ๋ก ์คํฌ๋กค ์ฌ์ฉ */
overflow-y: scroll; /* ์ธ๋ก ์คํฌ๋กค ์ฌ์ฉ */
}

::-webkit-scrollbar-thumb
๋ง์ฐ์ค๋ก ์์ง์ด๋ ์คํฌ๋กค๋ฐ ๋ง๋๋ฅผ ๊พธ๋ฏผ๋ค

/* ์คํฌ๋กค๋ฐ ๋ง๋ */
::-webkit-scrollbar-thumb {
background: #e89a3e; /* ์คํฌ๋กค๋ฐ ๋ง๋ ์์ */
border: 2px solid #9b6a2f; /* ์คํฌ๋กค๋ฐ ๋ง๋ ํ
๋๋ฆฌ ์ค์ */
border-radius: 12px 12px 12px 12px;
}
์ด๋ฐ์๋ ์ผ๋ฐ css ๊ฐ์ ์ ํ์ :hover ์ ํจ๊ป ์กฐํฉํ์ฌ ์คํฌ๋กค ๋ง๋์ ์ปค์๋ฅผ ์ฌ๋ฆด๋ ์์ ๋ณ๊ฒฝ๋ ์ํฌ ์ ์๋ค.
::-webkit-scrollbar-thumb:hover {
background-color:#a0a0a5;
}
::-webkit-scrollbar-track
์คํฌ๋กค๋ฐ ๋ง๋๊ฐ ์์ง์ด๋ ์์ญ ๋ท ๋ฐฐ๊ฒฝ์ ๊พธ๋ฏผ๋ค.
/* ์คํฌ๋กค์ด ์์ง์ด๋ ๋ท ๋ฐฐ๊ฒฝ */
::-webkit-scrollbar-track {
background: #9b6a2f; /* ์คํฌ๋กค๋ฐ ๋ท ๋ฐฐ๊ฒฝ ์์ */
}
์๋ ์์ ๋ ๋ฐ๋ก ์์์ ๋ฐฐ์ด ::-webkit-scrollbar , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track ์์ฑ๋ง ์ฌ์ฉํด ์คํ์ผ๋งํ ์ปค์คํ
์คํฌ๋กค๋ฐ์ด๋ค. ์ ๋งํ ๊ฒฝ์ฐ์๋ ์ 3๊ฐ์ง ์์ฑ๋ง์ผ๋ก๋ ์คํ์ผ๋ง์ด ๊ฐ๋ฅํ๋ค๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.
::-webkit-scrollbar-button
๊ธฐ๋ณธ ๋ธ๋ผ์ฐ์ ์คํฌ๋กค๋ฐ์ ์๋ ์ํ ํ์ดํ ๋ฒํผ์ ๋งํ๋ค. ๋ณดํต ์คํฌ๋กค๋ฐ๋ฅผ ๊พธ๋ฐ๋ ๋์์ธ ์ธก๋ฉด์์ ์ข์ง ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฆฌ๋ ํธ์ด๋ค.

์คํฌ๋กค๋ฐ ๊ฐ์ ํด๋์ค ์ ํ์ ์ข ๋ฅ
๋ค์์ ์ฃผ๋ก scrollbar-button ๊ณผ scrollbar-track-piece ์ ๊ฐ์ ์ ํ์๋ก ์ฌ์ฉ๋๋ ์์ฑ๋ค์ด๋ค. ๊ฐ์ ์ ํ์๋ก ์ธ๋ก or ๊ฐ๋ก ์คํฌ๋กค๋ฐ ์ด๋, ์ฒซ์งธ ๋ฒํผ์ด๋ ๋์งธ ๋ฒํผ์ด๋๋ฅผ ์ ํํ ๋ ์ฐ์ด๋ ๊ฒ์ผ๋ก ๋ณด๋ฉด๋๋ค.
๋ค๋ง ๋ณต์กํ๊ธฐ๋ง ํ๊ณ ์ค๋ฌด์์ ๊ฑฐ์ ์ฐ์ง ์์, ์ด๋ฐ ์ ํ์๊ฐ ์๊ตฌ๋ ์ ๋๋ก ํ์ด๋ณด๊ณ ๋์ด๊ฐ๊ธฐ๋ฅผ ๊ถ์ฅํ๋ค.
- :horizontal - ์ํ ๋ฐฉํฅ์ ํฌํจํ๋ ๋ชจ๋ ์คํฌ๋กค๋ฐ ๊ธฐ๋ฅ์ ์ ์ฉ
- :vertical - ์ธ๋ก ๋ฐฉํฅ ์คํฌ๋กค๋ฐ
- :decrement - ๋ทฐ์ ์์น๊ฐ ๊ฐ์ํ ์ง ์ฌ๋ถ (์์ง ์คํฌ๋กค๋ฐ์ ์์ชฝ, ์ํ ์คํฌ๋กค๋ฐ์ ์ผ์ชฝ).
- :increment - ๋ทฐ์ ์์น๊ฐ ์ฆ๊ฐํ ์ง ์ฌ๋ถ (์์ง ์คํฌ๋กค๋ฐ์ ์๋์ชฝ, ์ํ ์คํฌ๋กค๋ฐ์ ์ค๋ฅธ์ชฝ).
- :start - ๊ฐ์ฒด๊ฐ ์คํฌ๋กค๋ฐ thumb ์์ ๋ฐฐ์น๋ ์ง ์ฌ๋ถ
- :end - ๊ฐ์ฒด๊ฐ ์คํฌ๋กค๋ฐ thumb ๋ค์ ๋ฐฐ์น๋๋์ง ์ฌ๋ถ
- :single-button - ๋จ์ผ ๋ฒํผ์ด ์คํฌ๋กค๋ฐ ํธ๋ ์์ ์๋์ ๋ํ๋ ์ง ์ฌ๋ถ (์ธ๋ก ์คํฌ๋กค ๋ง๋์ ์/์๋ ๋ฒํผ๊ณผ ๊ฐ๋ก ์คํฌ๋กค ๋ง๋์ ์ผ์ชฝ ๋ฐ ์ค๋ฅธ์ชฝ ๋ฒํผ)
- :double-button - ๋ฒํผ ๊ทธ๋ฃน์ด ์คํฌ๋กค๋ฐ ํธ๋ ์์ ์๋์ ๋ํ๋ ์ง ์ฌ๋ถ (์ธ๋ก ์คํฌ๋กค ๋ง๋์ ์/์๋ ๋ฒํผ๊ณผ ๊ฐ๋ก ์คํฌ๋กค ๋ง๋์ ์ผ์ชฝ ๋ฐ ์ค๋ฅธ์ชฝ ๋ฒํผ)
- :no-button - ์คํฌ๋กค๋ฐ์ ๋ฐฉํฅ์ ๋ฐ๋ผ ๋ฒํผ์ด ์คํฌ๋กค๋ฐ ํธ๋ ์, ์๋ ๋๋ ์์ ๋ํ๋ ์ง ์ฌ๋ถ
- :corner-present - ์คํฌ๋กค๋ฐ ๋ชจ์๋ฆฌ๊ฐ ์๋์ง ์ฌ๋ถ
/* ์ธ๋ก ์คํฌ๋กค๋ฐ์ ๋จ์ผ ํ์ดํ ๋ฒํผ */
::-webkit-scrollbar-button:vertical:single-button {
/* single button styling */
background: red;
}

/* ์ธ๋ก ๊ฐ๋ก ์คํฌ๋กค๋ฐ์ ๋๋ธ ํ์ดํ ๋ฒํผ */
::-webkit-scrollbar-button:double-button {
/* double button styling */
}

/* ์ํ ๋ฐฉํฅ ์คํฌ๋กค๋ฐ ํ์ดํ ๋ฒํผ */
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:vertical:decrement {
}
/* ์ข์ฐ ๋ฐฉํฅ ์คํฌ๋กค๋ฐ ํ์ดํ ๋ฒํผ */
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-button:horizontal:decrement {
}

::-webkit-scrollbar-button:start {
background-color: red; /* ์ธ๋ก ๋ฐฉํฅ์ ์ด๋ ๋ฒํผ */
}
::-webkit-scrollbar-button:end {
background-color: orange; /* ๊ฐ๋ก ๋ฐฉํฅ์ ์ด๋ ๋ฒํผ */
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
/* ์คํฌ๋กค์ ํ์ดํ๊ฐ ํฌํจ๋ ์์ญ */
display:block;
height:8px;
background-color: #000;
}

์คํฌ๋กค๋ฐ ๊ฐ์ ํด๋์ค ์ ํ์ ํ์ฉ ์ฌ๋ก
๋น์ต ์ด๋ฌํ ๋ณต์กํ๊ธฐ๋งํ ์ ํ์๋ฅผ ์ด๋๋ค ์ธ์ง ๋จธ๋ฆฌ๋ง ์ํ๊ณ ์ ๋งคํ๊ธฐ๋ง ํ ํ ๋ฐ, ์ง์ ์ ์ ํ์๋ค์ ์คํ์ผ๋งํ์ฌ ์ฐ๋ ๊ฒฝ์ฐ๋ ๋๋ฌผ๋ค. ๋ค๋ง ์ด๋ฅผ ์์ฉํด์ ๋ง์ผ ๋ฌธ์์ ์๋จ nav์ ์คํฌ๋กค๋ฐ thumb์ ๊ฒน์น๋๊ฒ์ ๋ฐฉ์งํ๊ธฐ์ํด ์คํฌ๋กค๋ฐ์ ์๋จ ์์ญ์ ์ฌ๋ฐฑ์ ์ค์ผ ํ ๋ ์ด ๋ฒํผ ์์ญ์ ์ด์ฉํ์ฌ ๋น ๊ณต๊ฐ์ ํ ๋นํ๋ ์์ฉ์ด ๊ฐ๋ฅํ๋ค.
์๋ฅผ๋ค์ด ์๋ ์ฌ์ง๊ณผ ๊ฐ์ด ๋ฌธ๋จ์ ๊ฐ์ฅ ์๋ก ์ฌ๋ ธ์ ๊ฒฝ์ฐ ์คํฌ๋กค๋ฐ ๋ง๋๊ฐ ์๋จ nav ์์ญ์ ๋ค์ด๊ฐ ๊ฒน์ณ๋ฒ๋ฆด ์ ์๋ ๋ฌธ์ ์ ์ด ์๋ค.

์ด๋ ์ ์ ์ฌ์ฉ์ฑ์ ์ข์ง ์์ ํ์์ด๊ธฐ ๋๋ฌธ์ ํฌ๋ช ํ ์์ญ์ ๋ง๋ค์ด ์คํฌ๋กค ๋ง๋์ ๋งจ ์ ์์ญ ๊ธฐ์ค์ ์ ๋ฐ์ผ๋ก ๋ด๋ ค์ผ ํ๋๋ฐ ์ด๋ ํฌ๋ช ํ ๋ฒํผ ์์ญ์ ์์ฑํด์ ๋ฌธ์ ๋ฅผ ๊ทน๋ณต ํ ์ ์๋ค.

/* ์คํฌ๋กค๋ฐ ํธ๋ ์์ชฝ ์ฌ๋ฐฑ ๊ณต๊ฐ ์ฃผ๊ธฐ ์ํด์ */
.sidebar.close > .copy-sub > .sub-menu::-webkit-scrollbar-button:vertical:start:decrement,
.sidebar.close > .copy-sub > .sub-menu::-webkit-scrollbar-button:vertical:start:increment {
display: block;
height: 25px;
}
/* ๋ง์ผ ์คํฌ๋กค๋ฐ ํธ๋ ์๋์ชฝ๋ ์ฌ๋ฐฑ ๊ณต๊ฐ์ ์ฃผ๊ณ ์ถ๋ค๋ฉด ... */
.sidebar.close > .copy-sub > .sub-menu::-webkit-scrollbar-button:vertical:end:decrement {
display: block;
width: 25px;
}

์คํฌ๋กค๋ฐ ๊ฐ์ ํด๋์ค ์ ํ์ ์คํ์ผ๋ง
๋ง์ผ ์ด ์คํฌ๋กค๋ฐ ์ ์ฉ ๊ฐ์ ์ ํ์๋ฅผ ์ฌ์ฉํด์, ์คํฌ๋กค ์์ญ ํ์ดํ๋ฅผ ๋์์ธ ํ๋ค๋ฉด ์๋์ ๊ฐ์ด ์คํ์ผ๋ง ํ ์ ์๋ค.
/* Vertical Scrollbar (RIGHT SIDE) */
::-webkit-scrollbar-track:vertical {
background: -webkit-linear-gradient(180deg, #fff, #fff, #fff, #fff, rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), #fff, #fff, #fff);
border-radius: 10px;
}
/* Horizontal Scrollbar (BOTTOM SIDE) */
::-webkit-scrollbar-track:horizontal {
background: -webkit-linear-gradient(90deg, #fff, #fff, #fff, #fff, rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), rgba( 0, 0, 255, 0.5), #fff, #fff, #fff);
border-radius: 10px;
}
/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
background: rgba( 112, 178, 243, 0.75);
border-radius: 2em;
}
/* Horiontal Scrollbar button (TOP-RIGHT aKa START) */
::-webkit-scrollbar-button:horizontal:single-button:start {
position: absolute;
content: '';
border-bottom: 20px solid transparent;
border-right: 42px solid #7082f3;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}
/* Vertical Scrollbar button (BOTTOM-LEFT aKa START) */
::-webkit-scrollbar-button:vertical:single-button:start {
position: absolute;
content: '';
border-right: 20px solid transparent;
border-bottom: 62px solid #7082f3;
border-left: 20px solid transparent;
border-top: 20px solid transparent;
}
/* Horiontal Scrollbar button (BOTTOM-RIGHT aKa END) */
::-webkit-scrollbar-button:horizontal:single-button:end {
position: absolute;
overflow: hidden;
content: '';
border-bottom: 20px solid transparent;
border-left: 42px solid #7082f3;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
}
/* Vertical Scrollbar button (BOTTOM-RIGHT aKa END) */
::-webkit-scrollbar-button:vertical:single-button:end {
position: absolute;
overflow: hidden;
content: '';
border-bottom: 20px solid transparent;
border-top: 62px solid #7082f3;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
::-webkit-scrollbar-corner
์ธ๋ก ์คํฌ๋กค ๋ง๋์ ๊ฐ๋ก ์คํฌ๋กค ๋ง๋๊ฐ ๋ชจ๋ ๋ง๋๋ ์คํฌ๋กค ๋ง๋์ ์ค๋ฅธ์ชฝ ์๋ ๋ชจ์๋ฆฌ ๋ถ๋ถ์ด๋ค. ์ผ๋ฐ์ ์ผ๋ก ์คํฌ๋กค๋ฐ๋ฅผ ์คํ์ผ๋งํ ์ ์จ๊ธฐ๋ ํธ์ด๋ค.
/* ์ํ+์ข์ฐ ์คํฌ๋กค์ด ๋ง๋๋ ์ฐ์ธก ํ๋จ์ ์ฝ๋ ๋ถ๋ถ */
::-webkit-scrollbar-corner {
background: transparent;
}
Custom Scrollbar ์์ฉํ๊ธฐ
์คํฌ๋กค๋ฐ ์จ๊ธฐ๊ณ ์คํฌ๋กค ๊ธฐ๋ฅ๋ง ์ด๋ฆฌ๊ธฐ
์คํฌ๋กค๋ฐ UI๊ฐ ์น์ฌ์ดํธ์ ์๊ฐ์ ๊ณต๊ฐ์ ์ฐจ์งํ๋ ๊ฒ์ด ๋ณด๊ธฐ ์ซ์ ๊ฒฝ์ฐ ์คํฌ๋กค ๊ธฐ๋ฅ์ ์ด๋ฆฌ๊ณ ์คํฌ๋กค๋ฐ๋ฅผ ๊ฐ๋ฆด์ ์๋ค.
/* hide scrollbar but allow scrolling */
html {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
html::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
์คํฌ๋กค ์ต์ ๋์ด ์ค์
๋ณธ๋ฌธ์ด ์์ฒญ ๊ธธ๊ฒฝ์ฐ ์คํฌ๋กค๋ฐ ๋ง๋ ๋์ด๊ฐ ๋งค์ฐ ์งง์์ ธ ํด๋ฆญ์ด ์ ์๋์ด ์ฌ์ฉ์ฑ์ด ๋จ์ด์ง ์ ์๋ค. ์ด๋ min-height ๋ฅผ ์ง์ ํจ์ผ๋ก์จ ๋ง๋ ์ต์ ๋์ด๋ฅผ ์ง์ ํจ์ผ๋ก์จ ๊ทน๋ณตํ ์ ์๋ค.
::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #f4f4f4;
min-height: 50px; /* ์คํฌ๋กค๋ฐ ๋ง๋ ์ต์ ๋์ด */
}
์คํฌ๋กค๋ฐ ์ฌ๋ฐฑ ์ฃผ๊ธฐ
์คํฌ๋กค๋ฐ ํธ๋๊ณผ ์คํฌ๋กค๋ฐ ๋ง๋ ์ฌ์ด ๊ฐ๋ก ํญ ์ฌ๋ฐฑ์ ์ค์, ์คํฌ๋กค๋ฐ๊ฐ ์์ญ ์์ ์์นํ๋๋ก ๋์์ธ ํ๊ณ ์ถ๋ค. ํ์ง๋ง ๊ธฐ๋ณธ์ ์ผ๋ก ์คํฌ๋กค๋ฐ ์์ฑ์๋ margin ์ด๋ padding ์์ฑ์ด ๋จนํ์ง ์๋๋ค. ๋ฐ๋ผ์ ์ฐํ์ ์ธ ์คํ์ผ๋ง ๋ฐฉ์์ผ๋ก ์ฌ๋ฐฑ์ ๊ตฌํํ์ฌ์ผ ํ๋๋ฐ, border ์์ฑ์ ์ด์ฉํ์ฌ ๊ตฌํํ ์ ์๋ค. ์คํฌ๋กค๋ฐ ํธ๋ ์์๊ณผ border ํ
๋๋ฆฌ ์์์ ์ผ์น์ํค๊ณ , ์ปจํ
์ธ ๋ฅผ ๋ค๋ฅธ์์ผ๋ก ์ค์ ํ๋ฉด ๋ง์น ์ฌ๋ฐฑ์ ์ฃผ๋ ํจ๊ณผ๋ฅผ ์ป์์ ์๋ ๊ฒ์ด๋ค.
/* ์คํฌ๋กค์ ์ ์ฉํ ์์ญ */
.scroll{
...
background-color: rgba(0,0,0,0.8);
}
.box1::-webkit-scrollbar{
width: 20px;
}
/* ์คํฌ๋กค๋ฐ ๋ง๋ ์ค์ */
.box1::-webkit-scrollbar-thumb{
background-color: rgba(255,255,255,1);
border-radius: 10px;
border: 7px solid rgba(0,0,0,0.8); /* ์คํฌ๋กค์ ์ ์ฉํ ์์ญ ์๊น๊ณผ border ์์์ ๋๊ฐ์ด ๋ง์ถ๋ค */
}
.box1::-webkit-scrollbar-track{
background-color: rgba(0,0,0,0); /* ์คํฌ๋กค๋ฐ ๋ท ๋ฐฐ๊ฒฝ์ ํฌ๋ช
์ฒ๋ฆฌํ๋ค */
}
๋ง์ผ ์๋จ, ํ๋จ์ ์ฌ๋ฐฑ์ ํฌ๊ฒ ์ฃผ๊ณ ์ถ๋ค๊ณ ํด์,border-top-width๋ฅผ ๋๋ฆฌ๋ฉด ์คํ๋ ค ๋ง๋์คํฌ๋กค๋ฐ๊ฐ ๊นจ์ง๋ค. ์ด๋๋ ์์์ ๋ฐฐ์ด::-webkit-scrollbar-button์์ฑ์ ์คํฌ๋กค๋ฐ ๊ฐ์ ํด๋์ค ์ ํ์๋ฅผ ์ด์ฉํด์ผ ํ๋ค.
์คํฌ๋กค ํธ๋ ๊ฐ๋ฆฌ๊ณ ๋ง๋๋ง ๋ณด์ด๊ธฐ
์๋ฅผ ๋ค์ด ํํ์ด์ง์ ์๋์ ๊ฐ์ด ์นด๋ค๋ ํค๋ ๋ฐฐ๋ ์ด๋ฏธ์ง ์์ญ์ผ๋ก ๋์์ธ ๋์ด ์๋ค๋ฉด, ์ฐ์ธก ์คํฌ๋กค๋ฐ ์์ญ ๋๋ฌธ์ ๋ญ๊ฐ ํ๋ฉด์ด ๋ญ๊ฐ ๋ถ๋ฆฌ๋ ๋๋์ด ๋ค์ด ๋งค๋๋ฝ์ง ์์ ๊ฐ๊ฐ์ด ๋ ๋ค.

์ด๋๋ ์์์ ๋ดค๋ ์คํฌ๋กค๋ฐ๋ฅผ ์จ๊ธฐ๊ณ ์คํฌ๋กค ๊ธฐ๋ฅ๋ง ์ด๋ฆฌ๊ธฐ๋ฅผ ํตํด ์ด๋์ ๋ ์ํ๊ฐ ๋๊ฒ ์ง๋ง ์คํฌ๋กค ๋ง๋๋ฅผ ์จ๊ธฐ๋ ๊ฒ์ ์ ์ ์ฌ์ฉ์ฑ ์ ์ฉ ์ข์ง ๋ชปํ ๋ฐฉ๋ฒ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฐฐ๋ ๋ถ๋ถ์ ์ด๋ฏธ์ง ์ด๊ธฐ ๋๋ฌธ์ ๋ฐ๋ก ์์์ ๋ฐฐ์ด border ์์ฑ์ ์ด์ฉํ ์คํฌ๋กค ์์ญ์ ๋ฐฐ๊ฒฝ์์ ์ง์ ํจ์ผ๋ก์จ ์จ๊ธฐ๋ ๋ฐฉ๋ฒ๋ ์ฌ์ฉํ ์๊ฐ ์๋ค.
๋ฐ๋ผ์ ์คํฌ๋กค๋ฐ ๋ง๋๋ ์๋ ์คํฌ๋กค ํธ๋ ์์ญ์ ์์ ๋ฐฐ๋ ์์ญ์ด ํ๋ฉด์ ๊ฝ์ฐจ๋ ๋๋์ ์ฃผ๋ ์คํ์ผ๋ง์ ํ๊ธฐ ์ํด์ ๋ณ๋์ ์์ ์ด ํ์ํ๋ค. ์ ์ฉํ๋ฉด ์๋ ์ฌ์ง๊ณผ ๊ฐ์ด ์ฒญ๋ก์ ์คํฌ๋กค ๋ง๋๋ ์ด์์๊ณ ์คํฌ๋กค ํธ๋์ ์์ด์ ธ ๋ฐฐ๋๊ฐ ํ๋ฉด์ ๊ฝ์ฐจ๊ฒ ๋๋ค.

์ด์ ๋ํ CSS ์ฝ๋๋ ์๋์ ๊ฐ๋ค. ์ด๋ ๋ฐ๋์ ๋ฐ๋์ overflow ์์ฑ์ overlay ์ฒ๋ฆฌ ํ์ฌ์ผ ํ๋ค. ๊ทธ๋์ผ ์คํฌ๋กค๋ฐ๊ฐ ๊ณต๊ฐ์ ์ฐจ์งํ์ง ์๊ณ ์ฝํ ์ธ ์์ ๊ทธ๋ ค์ง๋ค.
body {
overflow-y: overlay; /* ๋ฐ๋์ overlay ์ฒ๋ฆฌ */
}
::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-thumb {
outline: none;
border-radius: 10px;
border: 4px solid transparent;
box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.15);
}
::-webkit-scrollbar-thumb:hover {
border: 4px solid transparent;
box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.3);
}
::-webkit-scrollbar-track {
box-shadow: none;
background-color: transparent;
}
์คํฌ๋กค ์ ๋๋ฉ์ด์ ์ ์ฉํ๊ธฐ
์คํฌ๋กค ํธ๋์ ๊ฐ๋ฆฌ๊ณ ๋ง๋๋ง ๋ณด์ด๋๋ก ์คํ์ผ๋งํ๊ณ ์ถ๊ฐ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ์ฒ๋ฆฌ๋ฅผ ํตํด ์คํฌ๋กค ํ์ง ์์ผ๋ฉด ์ฌ๋ผ์ง๊ณ , ์คํฌ๋กค ํ๋ ๋์๋ง ์คํฌ๋กค์ด ๋ํ๋๋๋ก ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ๋ถ์ฌํ ์๋ ์๋ค.
๋จ, ์คํฌ๋กค๋ฐ์ box-shadow๋ transition ์์ฑ์ด ๋จนํ์ง ์๊ธฐ ๋๋ฌธ์ ์กฐ๊ธ ๋ณต์กํ ์ฐํ์ ์ธ ๋ฐฉ๋ฒ์ ์จ์ผ ํ๋๋ฐ, ๋ฐฉ๋ฒ์ box-shadow ์์์ ์ผ๋ถ๋ก ์ง์ ํ์ง ์์ผ๋ฉด ๊ทธ์ ๋ถ๋ชจ์ color ์์ฑ๊ฐ์ ๋ฐ๋ผ๊ฐ๋ค๋ ์์ ํน์ฑ์ ์ด์ฉํด ์๋์ ๊ฐ์ด ๊ตฌ์ฑํด ์ค ์ ์๋ค.
html {
/* ์ธ๋ก ์คํฌ๋กค overlay ์ฒ๋ฆฌ */
overflow-y: overlay;
/* ์คํฌ๋กค๋ฐ์ box-shadow ์์๊ฐ์ ์ง์ */
color: blue;
transition: all 0.4s ease; /* ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์
*/
}
html::-webkit-scrollbar {
width: 12px;
height: 12px;
}
html::-webkit-scrollbar-thumb {
outline: none;
border-radius: 10px;
border: 3px solid transparent;
/* box-shadow ์์์ ์ง์ ์ํ์ ๊ฒฝ์ฐ ๊ธฐ๋ณธ์ ์ผ๋ก color ๊ฐ์ ๋ฐ๋ผ๊ฐ */
box-shadow: inset 6px 6px 0;
}
html::-webkit-scrollbar-track {
box-shadow: none;
background-color: transparent;
}
/* ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ํด scroll-hidden ํด๋์ค๊ฐ ์ถ๊ฐ๋๋ฉด ์คํฌ๋กค ๋ง๋ ํฌ๋ช
์ฒ๋ฆฌ */
html.scroll-hidden {
color: transparent;
}
/* html์์ ์คํฌ๋กค๋ฐ ์์์ ์ํด color๋ฅผ ์ฐ๋ body์์ ๋ณ๋๋ก ์ง์ */
body {
color: black;
}
let window_scrolling;
window.addEventListener('scroll', () => {
if (!window_scrolling) {
console.log('start wheeling!');
document.documentElement.classList.remove('scroll-hidden');
}
// ์ผ์ ์๊ฐ ๋ค์ ์คํฌ๋กค ๋์ ๋ฉ์ถค์ ๊ฐ์ง
clearTimeout(window_scrolling);
window_scrolling = setTimeout(() => {
console.log('stop wheeling!');
window_scrolling = undefined;
document.documentElement.classList.add('scroll-hidden');
}, 400);
});
Custom Scrollbar ์์
๋ค์์ ๋ค์ํ ์ปค์คํ ์คํฌ๋กค๋ฐ ์คํ์ผ๋ง ์์ ์ด๋ค.
Custom Scrollbar Maker
์๋์ GUI๋ฅผ ํตํด ๋ณด๋ค ์์ฝ๋ฉ ๋ณด๋จ ๊ฐํธํ๊ฒ ์ปค์คํ ์คํฌ๋กค๋ฐ ์คํ์ผ๋ง์ ํ ์๋ ์๋ค.
Custom Scrollbar Maker
A simple tool for making custom scrollbars for your websites....
codepen.io

Custom Scrollbar ๋ผ์ด๋ธ๋ฌ๋ฆฌ
jQuery custom content scroller
์ ํ์ผ๋ก ์ ์ด์ฟผ๋ฆฌ๊ฐ ํ์ํ๋ค. ๋์ ์ ์ ๋ง ๋ค์ํ ์คํฌ๋กค๋ฐ ๋์์ธ์ ์ป์ ์ ์๋ค.
jQuery custom content scroller โ malihu | web design
Last updated on Jul 11, 2016 Originally published on August 1, 2010 by malihu, under Plugins. Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQue
manos.malihu.gr

Custom Scrollbar JavaScript Libraries
10๊ฐ์ง ์์ ์๋ฐ์คํฌ๋ฆฝํธ, css ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ชจ์์ง์ด๋ค.
10 Best Custom Scrollbar JavaScript Libraries (2023 Update) - CSS Script
A list of 10 JavaScript and/or pure CSS libraries which can be used to replace and enhance the native scrollbars. Click to preview and download.
www.cssscript.com


Smooth Scrollbar
๋น์ฝํ CSS ์์ฑ๋ง์ ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ์ ์คํฌ๋กค๋ฐ๋ฅผ ์์ ๋ฒ๋ฆฌ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ธํฐ๋ํฐ๋ธ(Interactive)ํ๊ฒ ์คํฌ๋กค์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ๋ ์กด์ฌํ๋ค. ๋ํ์ ์ผ๋ก ๋ณธ ๋ธ๋ก์ ๊ฐ๋ก ์คํฌ๋กค ๊ธฐ๋ฅ์ด๋, ์คํฌ๋กค์ ๋ด๋ฆด๋ ์ค๋ฌด์คํ๊ฒ ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ฃผ๋ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ค ์ ์๋ค. ๋ค๋ง ์คํฌ๋กค ๋์ ์์ฒด๊ฐ ๊ณ์ ์ด๋ฒคํธ๊ฐ ๋ฐ์๋๋ ๋ฌด๊ฑฐ์ด ๋์์ด๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์คํฌ๋กค์ ์ ์ดํ๋ ๋ฐฉ๋ฒ์ ์ฑ๋ฅ ์ด์๊ฐ ๋ฐ๋ฅด๊ธฐ๋ ํ๋ค.
https://idiotwu.github.io/smooth-scrollbar/


# ์ฐธ๊ณ ์๋ฃ
https://blog.esteetey.dev/make-your-website-stand-out-with-a-custom-scrollbar
https://ameblo.jp/personwritep/entry-12538186713.html
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.