브라우저 스크롤바 스타일링

🎨 CSS

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 6px;
  transition: 0.3s ease;
}
/* Scrollbar Background Style */
*::-webkit-scrollbar-track {
  background: #eee;
}
/* Scrollbar Body Style */
*::-webkit-scrollbar-thumb {
  background-color: black;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: black #eee;
				/* body background */
}

✨ 스크롤바 라이브러리

smooth-scrollbar

npm: smooth-scrollbar

Customize scrollbar in modern browsers with smooth scrolling experience.. Latest version: 8.8.3, last published: 2 months ago. Start using smooth-scrollbar in your project by running `npm i smooth-scrollbar`. There are 108 other projects in the npm registry using smooth-scrollbar.

https://www.npmjs.com/package/smooth-scrollbar

simple-scrollbar

npm: simple-scrollbar

Very simple vanilla javascript library for creating a custom scrollbar cross-browser and cross-devices.. Latest version: 0.4.0, last published: 5 years ago. Start using simple-scrollbar in your project by running `npm i simple-scrollbar`. There are 4 other projects in the npm registry using simple-scrollbar.

https://www.npmjs.com/package/simple-scrollbar

gemini-scrollbar(react, vue 버전도 따로 있음)

npm: gemini-scrollbar

Custom scrollbars with native scrolling. Latest version: 1.5.3, last published: 6 years ago. Start using gemini-scrollbar in your project by running `npm i gemini-scrollbar`. There are 15 other projects in the npm registry using gemini-scrollbar.

https://www.npmjs.com/package/gemini-scrollbar

Reference

::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN

The ::-webkit-scrollbar CSS pseudo-element affects the style of an element's scrollbar when it has overflow:scroll; set.

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

scrollbar-color - CSS: Cascading Style Sheets | MDN

The scrollbar-color CSS property sets the color of the scrollbar track and thumb.

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

Change Browser Scrollbar Colour with Tailwind CSS - Scott Spence

Styling a scrollbar with Tailwind CSS for Chrome, Edge, Safari and Firefox. This is possible with vendor prefixes and pseudo-elements. I touched on the configuration for this in the Change Text Highlight Color with Tailwind CSS post I did recently.

https://scottspence.com/posts/change-scrollbar-color-tailwind-css#vanilla-css-example