[ CSS / SCSS ] 스크롤바 제거하기

가로 스크롤 만드는 도중에 스크롤바 모양이 나와서 지져분해 보이는 현상이 있었습니다.

그래서 가로 스크롤을 제거하기 위해 사용한 내용입니다.

 

_reset.css

ul {
    -ms-overflow-style: none; /* IE, Edge를 위한 내용입니다. */
    scrollbar-width: none; /* FireFox를 위한 내용입니다. */
}

ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera를 위한 내용입니다. */
}

저는 ul 한곳에서만 없애기 위해 이렇게 작성을 했지만 SCSS에서는 아래처럼 적용을 하거나 변수명을 준다음 따로따로 주는 방법도 있습니다.

 

_reset.scss

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	// 스크롤바 제거
	-ms-overflow-style: none;
	scrollbar-width: none;
	&::-webkit-scrollbar {
		display: none;
	}
}