투두리스트의 리스트가 박스에서 넘치는 경우 스크롤되는 기능을 넣었다. overflow-y: scroll
그런데 스크롤기능이 필요없을 때도(리스트가 많지 않을 때) 스크롤바가 보이는 것이 거슬렸다.
그래서 스크롤기능이 필요없을 때는 스크롤이 숨겨지고,
스크롤기능이 필요할 때는 스크롤이 보이도록 하는 디자인을 원했다.
➡️ 직접 체험해보기 링크!
타입스크립트 학습을 위해 만든 Todo List 토이프로젝트입니다. ➡️ 깃허브
Skill: TypeScript, React, Styled-components, recoil
처음에 찾은 것은 리스트가 넘쳐서 스크롤기능이 작용할 때도 스크롤이 보이지 않았다.
스크롤 기능은 되는데 보이지 않게 하는 것이었다. 나는 스크롤기능이 작용할 때는 보였으면 했다.
그래서 찾은 것이 overflow: auto
!!! 상황별로 GIF와 함께 보면 이해가 쉬울 것 같아서 첨부했다.
const FullListContainer = styled.div`
height: 520px;
overflow-y: scroll;
-ms-overflow-style: none; /*IE, Edge*/
scrollbar-width: none; /*Firefox*/
::-webkit-scrollbar {
display: none; /*Chrome, Safari, Opera*/
width: 0px;
}
`;
요소가 범위를 넘치든 안넘치든 스크롤이 보이지 않는다. 스크롤의 기능은 된다.
overflow: auto
const FullListContainer = styled.div`
height: 520px;
overflow-y: auto;
`;
요소가 범위를 넘치면 스크롤이 보이면서 스크롤 기능이 작용한다.
개인적으로 사용자경험이 이쪽이 더 좋기 때문에 이렇게 적용시켰다.