[CSS] 스크롤바 없애기

 

Scroll bar
CSS

 

 

 

# HTML

<div class='scroll'>
  <p>스크롤</p>
  <p>Content 1</p>
  <p>Content 2</p>
  <p>Content 3</p>  
  <p>Content 4</p>
  <p>Content 5</p>
  <p>Content 6</p>
  <p>Content 7</p>
  <p>Content 8</p>
  <p>Content 9</p>
  <p>Content 10</p>
</div>

 

 

 

# CSS

# 영역::-webkit-scrollbar -> 스크롤바 영역에 대한 설정으로 display:none속성으로 스크롤바를 없앨 수 있음.
/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.scroll::-webkit-scrollbar {
  display: none;
}


# 익스플로러, 파이어폭스는 -webkit-scrollbar코드로 동작이 되지 않으며, 스크롤바를 숨기기 위해서는 다음과 같은 코드를 작성해야한다.
.scroll {
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}


# 스크롤바 생성
.scroll {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

.scroll p {
  font-size: 2rem;
  padding: 0.6rem 1rem;
  background: #febf00;
}


# 스크롤 기능 없애기 - 해당요소의 영역을 벗어나는 자식들을 보이지 않도록 해주는 속성이다. 
.scroll {
	overflow: hidden;
}


/* ------------------- */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  word-break: break-all;
  font-family: Pretendard;
}