CSS 스크롤 마진 오른쪽 속성

정의와 사용법

scroll-margin-right 속성을 통해 설정됩니다.

吸附位置은 스크롤을 멈추면 자식 요소가 컨테이너 내에서 고정된 위치를 나타냅니다.吸附位置은 scroll-snap-align 속성을 설정하면, CSS 속성 direction 속성을 설정하면, 자식 요소에 writing-mode 영향을 받습니다.

주의:이 속성은 자식 요소의 오른쪽에 위치를 설정할 때만 유효합니다.

을(를) 보려면 scroll-margin-right 속성을 설정해야 합니다. scroll-margin-right 속성을 설정하면, 자식 요소에 scroll-snap-align 속성을 설정하고, 부모 요소에 scroll-snap-type 속성.

예제

예제 1

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

div {
  scroll-margin-right: 20px;
}

직접 시도해 보세요

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

scroll-margin-right 속성은吸附行为的이미지 갤러리에서 사용할 수 있습니다. 여기서는,scroll-margin-right 사용자가 오른쪽에 또 다른 이미지가 있는지 알 수 있도록 합니다. 첫 번째 이미지를 스크롤하여 효과를 확인하세요:

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

직접 시도해 보세요

예제 3: 위치 고정

다음과 같이 만들기 위해, scroll-margin-right 속성이 적용되고, 자식 요소의 오른쪽에 위치를 설정해야 합니다. 이 예제에서는,direction 속성이 자식 요소의 오른쪽에서 왼쪽으로 위치를 변경합니다. 이러한 코드를 사용하면,scroll-margin-right 속성이 더 이상 작동하지 않습니다:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

직접 시도해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS 스크롤 스나ップ 알라인 속성

참조:CSS 스크롤 스나ップ 타입 속성

참조:CSS writing-모드 속성