[scroll] CSS - scroll-margin 속성 - 스크롤마진 일괄 지정 (= scroll-margin속성 = 스크롤마진속성)

1. scroll-margin 예제 - 스크롤 여백 상우하좌 일괄 지정
2. scroll-margin 정의
3. scroll-margin 구문
4. scroll-margin 예제 - 좌측만 스크롤 여백 지정
5. scroll-margin 예제 - 우측과 하단만 스크롤 여백 지정

scroll-margin 예제 - 스크롤 여백 상우하좌 일괄 지정

(예) 상우하좌 모든 면에 scroll-margin:50px 지정되어 있으나, scroll-snap-align:start 속성 탓에 위쪽에서만 스크롤 위치 재조정됨.

 

<style>

#container {

  width: 80%;

  aspect-ratio: 3/1;

  padding: 100px 0;

  margin: auto;

  border: 1px solid gray;

  overflow-x: hidden;

  overflow-y: scroll;

  scroll-snap-type: y mandatory;

}

.a {

  background-color: red;

  width: 90%;

  aspect-ratio: 3/1;

}

.b {

  background-color: blue;

  width: 45%;

  aspect-ratio: 4/1;

}

.a, .b {

  margin: 2px;

  scroll-snap-align: start;

  scroll-margin: 50px;

}

</style>

<div id="container">

  <div class="a"></div>

  <div class="b"></div>

  <div class="a"></div>

  <div class="b"></div>

  <div class="a"></div>

  <div class="b"></div>

  <div class="a"></div>

</div>

 

결과보기

scroll-margin 정의

 

스냅 위치(= 스크롤을 중지할 때 컨테이너의 제자리에 맞춰지는 하위 요소의 위치)와 컨테이너 사이의 거리를 지정. (즉, 스크롤 중지하면 스크롤이 빠르게 조정되어 스냅위치와 컨테이너 사이의 지정된 거리에서 중지됨.)

 

---

 

1.

• scroll-margin 속성 효과 확인하려면, 하위요소에 scroll-margin 속성과 scroll-snap-align 속성 지정하고, 상위요소(=컨테이너)에  scroll-snap-type 속성을 함께 지정해야 함.
• 속성값은 1~4개까지 띄어쓰기로 지정 가능.

 

2. 속성값 개수별 의미

• 1개 (예: 10px) - 상우하좌
• 2개 (예: 10px 20px) - 상하 좌우
• 3개 (예: 10px 20px 30px) - 상 좌우 하
• 4개 (예: 10px 20px 30px 40px) - 상 우 하 좌

 

3.

• 기본값: 0
• 상속여부: X
• 애니가능: X
• CSS버전: CSS3
• JS구문: object.style.scrollMargin="20px";

 

4.

IE 제외한 주요 최신 브라우저 모두 지원.

 

5. MDN scroll-margin 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin

 

scroll-margin 구문

 

selector {scroll-margin: 0|value|initial|inherit;}

 

---

[속성값]

 

0

스크롤 마진 사용 X. (기본값)

 

value

px, pt, cm 등의 길이단위. (음수값 가능)

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

scroll-margin 예제 - 좌측만 스크롤 여백 지정

 

<style>

#container {

  width: 200px;

  aspect-ratio: 2/1;

  padding:0 100px;

  margin: auto;

  border: solid black 2px;

  overflow-x: scroll;

  overflow-y: hidden;

  white-space: nowrap;

  scroll-snap-type: x mandatory;

}

      

#container > img {

  height: 95%;

  width: auto;

  margin: 2px;

  scroll-snap-align: none start;

  scroll-margin: 0 0 0 50px;

}

</style>

<div id="container">

  <img src="https://i.imgur.com/PQNhCln.gif" alt="협박">

  <img src="https://i.imgur.com/YrkG5xB.gif" alt="키스">

  <img src="https://i.imgur.com/3h0LOk9.gif" alt="능글">

  <img src="https://i.imgur.com/WfW5mBC.png" alt="홈짱">

  <img src="https://i.imgur.com/57sBeiJ.gif" alt="스마일">

</div>

 

결과보기

scroll-margin 예제 - 우측과 하단만 스크롤 여백 지정

 

<style>

#container {

  scroll-snap-type: both mandatory;

  width: 50%;

  aspect-ratio: 1/1;

  margin: 30px auto;

  background-color: #fff;

  white-space: nowrap;

  overflow-x: scroll;

  overflow-y: scroll;

  border: 1px solid gray;

}

#container > div {

  display: inline-block;

  height: 85%;

  border-radius: 5%;

  aspect-ratio: 1/1;

  scroll-snap-align: end;

  scroll-margin: 0 10px 30px 0;

}

.a { background-color: red; }

.b { background-color: blue; }

.c { background-color: green; }

.d { background-color: yellow; }

.e { background-color: magenta; }

</style>

<div id="container">

  <div class="a"></div>

  <div class="b"></div>

  <div class="c"></div>

  <div class="d"></div>

  <div class="e"></div>

  <br>

  <div class="d"></div>

  <div class="c"></div>

  <div class="b"></div>

  <div class="a"></div>

  <div class="e"></div>

  <br>  

  <div class="c"></div>

  <div class="b"></div>

  <div class="a"></div>

  <div class="e"></div>

  <div class="d"></div>

  <br>

</div>

 

결과보기