요소가 넘칠 때만 스크롤 나타나게 하기 | overflow: scroll, auto, visible, hidden | CSS

박예선·2022년 11월 28일
2

HTML / CSS

목록 보기
3/4
post-thumbnail


투두리스트의 리스트가 박스에서 넘치는 경우 스크롤되는 기능을 넣었다. overflow-y: scroll
그런데 스크롤기능이 필요없을 때도(리스트가 많지 않을 때) 스크롤바가 보이는 것이 거슬렸다.
그래서 스크롤기능이 필요없을 때는 스크롤이 숨겨지고,
스크롤기능이 필요할 때는 스크롤이 보이도록 하는 디자인을 원했다.

➡️ 직접 체험해보기 링크!
타입스크립트 학습을 위해 만든 Todo List 토이프로젝트입니다. ➡️ 깃허브
Skill: TypeScript, React, Styled-components, recoil


처음에 찾은 것은 리스트가 넘쳐서 스크롤기능이 작용할 때도 스크롤이 보이지 않았다.
스크롤 기능은 되는데 보이지 않게 하는 것이었다. 나는 스크롤기능이 작용할 때는 보였으면 했다.
그래서 찾은 것이 overflow: auto!!! 상황별로 GIF와 함께 보면 이해가 쉬울 것 같아서 첨부했다.


요소에 관계없이 스크롤 숨기기: css로 숨기기

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;
`;

요소가 범위를 넘치면 스크롤이 보이면서 스크롤 기능이 작용한다.
개인적으로 사용자경험이 이쪽이 더 좋기 때문에 이렇게 적용시켰다.

profile
개발 좋아 lynn08082@gmail.com

0개의 댓글