overflow-anchor

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

overflow-anchor CSS 속성은 콘텐츠 이동을 최소화하기 위해 스크롤의 위치를 조정하는 브라우저의 스크롤 앵커링 동작을 선택적으로 비활성화하는 방법을 제공합니다.

스크롤 앵커링 동작은 이를 지원하는 브라우저에서는 기본적으로 활성화되어 있습니다. 따라서 이 속성의 값을 바꾸는 것은 일반적으로 문서나, 혹은 문서의 일부분에서 스크롤 앵커링에 문제가 있다고 느껴질 때에 한하여 동작을 비활성화할 수 있습니다.

시도해보기

구문

css
/* 키워드 값 */
overflow-anchor: auto;
overflow-anchor: none;

/* 전역 값 */
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: revert;
overflow-anchor: revert-layer;
overflow-anchor: unset;

auto

스크롤 위치를 조정할 때 요소가 잠재적인 앵커 동작을 합니다.

none

요소가 잠재적인 앵커 동작을 하지 않습니다.

형식 정의

초기값auto
적용대상all elements
상속no
계산 값as specified
Animation typediscrete

형식 구문

overflow-anchor = 
auto |
none

예제

스크롤 앵커링 방지하기

문서에서 스크롤 앵커링 동작을 방지하기 위해 overflow-anchor 속성을 사용합니다.

css
* {
  overflow-anchor: none;
}

명세서

Specification
CSS Scroll Anchoring Module Level 1
# exclusion-api

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overflow-anchor
auto
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

같이 보기