CSS scroll-margin 속성

정의와 사용법

scroll-margin 속성은 스nä프 위치와 컨테이너 간의 거리를 지정합니다.

이는 스크롤을 멈추면, 스nä프 위치와 컨테이너 간의 지정된 거리에 빠르게 조정되고 멈춘다는 것을 의미합니다.

스nä프 위치는 자식 요소가 스크롤을 멈추면, 컨테이너 내에서 스nä프된 위치를 의미합니다.

scroll-margin 속성은 다음 속성의 줄임말 속성입니다:

• scroll-margin-top
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-right

스크롤 마진 속성이 네 가지 값이 있을 때:

scroll-margin: 15px 30px 60px 90px;

• 상단 간격이 15px
• 오른쪽 간격이 30px
• 하단 간격이 60px
• 왼쪽 간격이 90px

스크롤 마진 속성이 세 가지 값이 있을 때:

scroll-margin: 15px 30px 60px;

• 상단 간격이 15px
• 좌우两侧의 거리는 30px입니다
• 하단 간격이 60px

스크롤 마진 속성이 두 가지 값이 있을 때:

scroll-margin: 15px 30px;

• 상단과 하단의 거리는 15px입니다
• 좌우两侧의 거리는 30px입니다

scroll-margin 속성에 값이 하나인 경우:

scroll-margin: 10px;

• 네 가지 방향의 거리는 모두 10px입니다

보고 싶은 것을 scroll-margin 속성을 자식 요소에 설정해야 합니다 scroll-margin 속성의 효과를 보려면 scroll-snap-align 속성을 부모 요소에 설정하고 scroll-snap-type 속성.

주의:아래의 예제에서 모든 면에 스크롤 마진을 설정했지만, scroll-snap-align 속성이 "start"으로 설정되었기 때문에 스크롤 행위가 상단 마진만 변경됩니다.

예제

예제 1

스크롤 위치와 컨테이너 간의 스크롤 마진을 20px로 설정합니다:

div {
  scroll-margin: 20px;
}

직접 시험해 보세요

예제 2: 이미지 라이브러리

scroll-margin 속성은吸附 행위를 가진 이미지 라이브러리에 사용될 수 있습니다. 여기서는,scroll-margin 사용자가 왼쪽에 또 다른 이미지가 있는 것을 볼 수 있도록 합니다. 첫 번째 이미지를 스크롤하여 효과를 확인할 수 있습니다:

#container > img {
  scroll-margin: 0 0 0 30px;
}

직접 시험해 보세요

예제 3: 하단과 오른쪽의 스크롤 마진을 설정

요소의 하단과 오른쪽에 설정할 수 있습니다 scroll-margin 속성. 수평 및 수직 스크롤을 다음 요소로 이동하여 효과를 확인할 수 있습니다:

#container > div {
  scroll-margin: 0 10px 30px 0;
}

직접 시험해 보세요

CSS 문법

scroll-margin: 0|value|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

관련 페이지

참조:CSS scroll-margin-bottom 속성

참조:CSS scroll-margin-left 속성

참조:CSS scroll-margin-right 속성

참조:CSS scroll-margin-top 속성

참조:CSS scroll-snap-align 속성

참조:CSS scroll-snap-type 속성