June.

10월 안에는 꼭...

Portfolio

About

스크롤을 원하는 곳에만 적용하기 (스크롤 체이닝, overscroll-behavior)

2023/01/31
짧.

1 min read

스크롤을 원하는 곳에만 적용하기 (스크롤 체이닝, overscroll-behavior)

스크롤 체이닝

웹페이지에서 사이드 바 같은 것을 만들 때, 화면에서 사이드 바가 전부 스크롤이 되었을 때 메인 화면이 스크롤 되는 것을 방지하고 싶을 때가 있다. 이 동작이 일어나는 이유는 스크롤이 되지 않는 부분에서 스크롤을 하면 부모 요소로 스크롤이 전달되기 때문이다.

이런 현상을 스크롤 체이닝(scroll chaining) 이라고 한다. 이런 스크롤 체이닝 현상을 관리하기 위해 CSS에서 제공하는 속성이 overscroll-behavior이다.

  • 참고 MDN - overscroll-behavior

overscroll-behavior

overscroll-behavior 속성은 스크롤이 끝까지 갔을 때 스크롤이 전달되는 것을 막는다.

1overscroll-behavior: auto | contain | none;
  • auto : 기본값으로 스크롤이 부모에게 전달된다.
  • contain : sibling element에 대해서는 스크롤 체인이 발생하지 않고, child element에 대해서는 scroll chain이 발생한다.
  • none : 스크롤이 전달되지 않는다.

또한 x, y 방향을 따로 지정해줄 수도 있다.

1/* x, y 따로 지정 */ 2overscroll-behavior: auto none; 3overscroll-behavior: contain contain; 4overscroll-behavior: none none;

관련 포스트가 4개 있어요.

useSyncExternalStore가 무엇일까?

짧.
react-use-sync-external-store cover image
2023/10/23 (updated)

React 18 useSyncExternalStore에 대해서

CSS flex box의 align-items의 flex-start와 baseline의 차이점에 대해서

짧.
css-flex-box-align-items-attributes cover image
2023/09/24

CSS에서 align-items의 flex-start와 baseline의 차이점

React 18.0.0 react-dom의 flushSync의 사용법과 주의사항에 대해서 알아보자.

짧.
react-flush-sync cover image
2023/09/24

React flushSync에 대해서

maxLength를 넣고 이모지를 넣으면 브라우저마다 계산되는 것이 다르다.

짧.
html-input-max-length cover image
2023/09/15

HTML `<input />`의 maxLength 동작이 safari에서 다른 이슈

profile

정현수.

Currently Managed

Currently not managed

© 2024. junghyeonsu all rights reserved.