스크롤바 숨기기
.box {
overflow: scroll;
overflow-x: scroll; /* 가로축만 스크롤 */
overflow-y:scroll; /* 세로축만 스크롤 */
}
overflow: scroll 기능을 이용하면 스크롤 바를 이용해 보이지 않는 컨텐츠를 보여줄 수 있다. 그런데 미관상 이 스크롤 바를 숨기고 싶을 수도 있는데, 이럴 때는 아래와 같은 코드를 추가해주면 된다.
.box {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
}
리액트에서 styled-component에 적용하고 싶다면 추가해주고 싶은 코드 안에 아래 코드를 써주면 된다. (크롬의 경우)
&::-webkit-scrollbar {
display: none;
}
'CSS' 카테고리의 다른 글
[CSS] Tailwind CSS (1) | 2024.07.15 |
---|---|
[CSS] Styled Components (0) | 2024.07.15 |
[CSS] Block Element Modifier (BEM) (0) | 2023.04.04 |