CSS로 스크롤바 숨기기

 

 

HTML

<div>
	Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum delectus harum molestias repudiandae sapiente ipsam, atque voluptatibus libero saepe dolorem beatae! Modi veritatis quidem delectus rem aut quod nihil molestias?
	Repudiandae, nam aperiam eveniet hic amet id quis aliquid molestias quo velit accusantium ea officiis at, labore corporis maxime consequatur neque fugiat qui ab distinctio. Quae nesciunt enim pariatur delectus.
	Eum, magnam itaque similique maxime rem nulla neque sunt esse vitae, eius ex. Fugit, dolor aperiam tempore harum excepturi fuga impedit officia cupiditate ullam possimus ad reprehenderit quae exercitationem itaque.
	Veritatis error voluptas repudiandae voluptatibus, accusamus vel itaque nam accusantium saepe hic perspiciatis placeat, maiores eum consectetur eos, reprehenderit quasi sint? Placeat deserunt repellat suscipit quisquam. Unde ipsam delectus sequi.
	Quod ullam commodi optio ea eligendi in tempore qui dolore rem ab, illum provident? Aut eligendi sunt nulla adipisci, aliquam soluta voluptatibus similique totam corporis nam eos. Saepe, dolores? Corrupti.
	Voluptatum earum, in odio illo delectus quod adipisci id culpa facilis iste deserunt magnam dolorem iusto aliquam, eligendi voluptate ducimus? Labore rem dolore odio eos quibusdam vitae doloremque eius deleniti!
	Vitae magni a assumenda aliquam, suscipit recusandae ut? Magnam nobis, autem corrupti odit labore modi eligendi facere veniam quod deleniti, ab ipsam vel. Placeat non voluptate reiciendis maxime similique ipsam!
	Atque consequuntur asperiores tenetur temporibus praesentium quas, illo tempore deleniti excepturi ratione blanditiis nobis quod aperiam repellat vero sit adipisci rerum? Commodi quis assumenda dolores labore reiciendis. Nemo, laudantium nesciunt?
	Eius placeat quibusdam numquam maiores libero vel aut saepe. Aspernatur sequi fugiat minima architecto fugit nostrum mollitia sed eius itaque deserunt eveniet, voluptates delectus exercitationem consequuntur possimus perspiciatis dolorem alias.
	Placeat doloremque aspernatur, incidunt aliquid vero error similique commodi tempora, maiores fugit quam officia voluptas et odit, tempore dicta. Voluptatibus hic reiciendis rerum natus quam placeat recusandae quia esse beatae.
</div>

 

 

CSS

div{width:400px; height: 400px; margin:0 auto; overflow: scroll; background: #ccc;}

 

 

 

코딩을 하다보면 스크롤바를 숨기고 싶을 때가 있습니다.

이를 javascript 없이 css 만으로 해결할 수 있습니다. 

 

 

CSS

div{width:400px; height: 400px; margin:0 auto; overflow: scroll; background: #ccc;}

/* Chrome, Safari and Opera */
div::-webkit-scrollbar {display: none;}

/* IE and Edge */
div {-ms-overflow-style: none;}

 

 

 

참고 사이트 : https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp