Snippet/CSS ์Šค๋‹ˆํŽซ

๐Ÿš€ ์Šคํฌ๋กค ๊ธฐ๋Šฅ์€ ์‚ด๋ฆฌ๊ณ  ์Šคํฌ๋กค๋ฐ” ๋งŒ ๊ฐ€๋ฆฌ๊ธฐ

์ธํŒŒ_ 2022. 2. 28. 20:33

์Šคํฌ๋กค๋ฐ”-์—†์• ๊ธฐ

์Šคํฌ๋กค๋ฐ” ๊ฐ€๋ฆฌ๊ธฐ

์Šคํฌ๋กค ์ž์ฒด ๊ธฐ๋Šฅ์€ ๋†”๋‘๋ฉด์„œ ์Šคํฌ๋กค๋ฐ”๋งŒ ์—†์• ๋Š” ์ฝ”๋“œ์ด๋‹ค.

/* ์ „์ฒด ๊ฐ€๋ฆฌ๊ธฐ */
body{
 -ms-overflow-style: none;
 }
::-webkit-scrollbar {
  display: none;
}


/* ํŠน์ • ๋ถ€๋ถ„ ์Šคํฌ๋กค๋ฐ” ์—†์• ๊ธฐ */
.box{
   -ms-overflow-style: none;
}
.box::-webkit-scrollbar{
  display:none;
}

See the Pen Hide the Scrollbar in CSS but Allow Scrolling (div) by HubSpot (@hubspot) on CodePen.

 

[CSS] ๐ŸŒŸ ์Šคํฌ๋กค ๋ฐ”(Scrollbar) ์Šคํƒ€์ผ๋ง ๐Ÿ’ฏ ์ด์ •๋ฆฌ

Custom Scrollbar ์Šคํƒ€์ผ๋ง ์œ ํŠœ๋ธŒ ํ™ˆํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉด ์Šคํฌ๋กค๋ฐ”๊ฐ€ ์ผ๋ฐ˜ ๋ธŒ๋ผ์šฐ์ € ์Šคํฌ๋กค๋ฐ”์™€๋Š” ๋‹ฌ๋ฆฌ ๋™๊ทธ๋ž—๊ฒŒ ์Šคํƒ€์ผ๋ง ๋˜์–ด ์žˆ์Œ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด์ฒ˜๋Ÿผ ์Šคํฌ๋กค๋ฐ” ์—ญ์‹œ ๋‹ค๋ฅธ ์š”์†Œ์ฒ˜๋Ÿผ CSS ์Šคํƒ€์ผ๋ง์ด

inpa.tistory.com