[css] 스크롤바 없애기 / 숨기기 / 디자인

🎨 [css] 스크롤바 숨기기/ 없애기/ 디자인

 

1. 스크롤바 숨기기

.scroll {
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}

.scroll::-webkit-scrollbar { /* 크롬, 사파리, 오페라, 엣지 */
  display: none;
}

 

2. 스크롤바 없애기 (기능 삭제)

.scroll {
  overflow: hidden;
}

 

3. 스크롤바 디자인

.scrollBar { 
  width: 500px;
  height: 500px;
  overflow-y: scroll;
}

.scrollBar::-webkit-scrollbar {
    width: 10px;
}

.scrollBar::-webkit-scrollbar-thumb {
    height: 30%; 
    background: #8500EF; /* 스크롤바 색상 */
    border-radius: 8px;
}

.scrollBar::-webkit-scrollbar-track {
    background: #c2c2c2;  /*스크롤바 뒷 배경 색상*/
}