(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;  /*스크롤바 뒷 배경 색상*/
}