element.scrollIntoView()

element.scrollIntoView()

element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정합니다. 패럴랙스 스크롤링 효과에서 많이 사용되며, block 속성은 수직 정렬을 의미하고, inline은 수평 정렬, smooth 속성은 부드러운 움직임 효과를 의미합니다.

---

element.scrollIntoView()

element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정합니다.

특징	설명
유형(type)	element
버전(version)	--
결과값(return)	None(undefined)
사용성	★★★☆☆

문법(Syntax)

element.scrollIntoView()

//스크롤 기본값({block: "start", inline: "nearest"})을 설정한 경우
document.querySelector(".box").scrollIntoView();

//스크롤 true({block: "start", inline: "nearest"})를 설정한 경우
document.querySelector(".box").scrollIntoView(true);

//스크롤 false({block: "end", inline: "nearest"})를 설정한 경우
document.querySelector(".box").scrollIntoView(false);

//스크롤 기본값을 설정한 경우
document.querySelector(".box").scrollIntoView({behavior: "auto", block: "start", inline: "nearest"})

//수직 정렬 시작({block: "start"})을 설정한 경우
document.querySelector(".box").scrollIntoView({block: "start"});

//부드럽게 수직 정렬 끝을 설정한 경우
document.querySelector(".box").scrollIntoView({behavior: "smooth", block: "start"});

//부드럽게 수직 정렬 가운데를 설정한 경우
document.querySelector(".box").scrollIntoView({behavior: "smooth", block: "center"});

//부드럽게 수직 정렬 끝을 설정한 경우
document.querySelector(".box").scrollIntoView({behavior: "smooth", block: "end"});

//부드럽게 수평 정렬 끝을 설정한 경우
document.querySelector(".box").scrollIntoView({behavior: "smooth", inline: "start"});

//부드럽게 수평 정렬 가운데를 설정한 경우
document.querySelector(".box").scrollIntoView({behavior: "smooth", inline: "center"});

//부드럽게 수평 정렬 끝을 설정한 경우
document.querySelector(".box").scrollIntoView({behavior: "smooth", inline: "end"});

속성(Property)

속성값	예시	설명
true	scrollIntoView(true)	수직 정렬을 시작({block: "start", inline: "nearest"})으로 설정합니다.
false	scrollIntoView(false)	수직 정렬을 끝({block: "end", inline: "nearest"})으로 설정합니다.
behavior	scrollIntoView({behavior: "auto"})	움직임을 기본값으로 설정합니다.
	scrollIntoView({behavior: "smooth"})	움직임을 부드러운 값으로 설정합니다.
block	scrollIntoView({block: "start"})	수직 정렬을 시작(기본값)으로 설정합니다.
	scrollIntoView({block: "center"})	수직 정렬을 가운데로 설정합니다.
	scrollIntoView({block: "end"})	수직 정렬을 끝으로 설정합니다.
	scrollIntoView({block: "nearest"})	수직 정렬을 가까운 곳으로 설정합니다.
inline	scrollIntoView({inline: "start"})	수평 정렬을 시작으로 설정합니다.
	scrollIntoView({inline: "center"})	수평 정렬을 가운데로 설정합니다.
	scrollIntoView({inline: "end"})	수평 정렬을 끝으로 설정합니다.
	scrollIntoView({inline: "nearest"})	수평 정렬을 가까운 곳(기본값)으로 설정합니다.

정의(Definition)

• element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정합니다.
• element.scrollIntoView() 메서드는 패럴랙스 스크롤링 효과에서 많이 사용됩니다.
• element.scrollIntoView() 메서드의 block 속성은 수직 정렬을 의미하고 inline은 수평 정렬을 의미합니다.
• element.scrollIntoView() 메서드의 smooth 속성은 움직임을 부드럽게 해줍니다.

스크롤과 관련된 메서드(Scroll Related method)

• window.pageXOffset 속성은 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다.
• window.pageYOffset 속성은 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다.
• window.scrollX 속성은 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다.
• window.scrollY 속성은 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다.
• window.scroll() 메서드는 선택한 요소에 스크롤 값을 설정합니다.
• window.scrollTo() 메서드는 선택한 요소에 스크롤 값(상대 위치)을 설정합니다.
• window.scrollBy() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정합니다.
• element.scrollLeft 속성은 선택한 요소에 가로 스크롤 값을 가져오거나 설정합니다.
• element.scrollTop 속성은 선택한 요소에 세로 스크롤 값을 가져오거나 설정합니다.
• element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정합니다.

위치 및 스크롤과 관련된 메서드(Position & Scroll Related method) - jQuery

• offset() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 가져오거나 설정합니다.
• position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 가져오거나 설정합니다.
• scrollLeft() 메서드는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져오거나 설정합니다.
• scrollTop() 메서드는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져오거나 설정합니다.

예제1(Sample)

박스 요소를 기준으로 움직이는 예제입니다.

이 박스를 기준으로 움직입니다.

scrollIntoView() scrollIntoView(false) scrollIntoView({block: "start"}) scrollIntoView({behavior: "smooth", block: "end"}) scrollIntoView({behavior: "smooth", block: "center"}) scrollIntoView({behavior: "smooth", block: "start"})

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="box">
        <div class="small-box">
            <span>박스 안에서 스크롤 한번 해볼래?</span>
        </div>
    </div>
    <div class="desc">
        <span class="h">0</span> px / 
        <span class="v">0</span> px
    </div>
</div>

.jsample {
    text-align: center;
}
.jsample .box {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #ddedff;
    border: 1px solid #4390E1;
    color: #4390E1;
    padding: 20px;
    position: relative;
    overflow: auto;
}
.jsample .small-box {
    width: 500px;
    height: 260px;
    background-color: #A2CBFA;
    border: 1px dashed #4390E1;
    display: flex;
    align-items: center;    
    justify-content: center;
}
.jsample .box span {
    color: #fff;
}
.jsample .desc {
    color: #4390E1;
}

호환성(Compatibility)

						6	7	8	9	10	11
element.scrollIntoView()	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고 사이트(Reference)

• MDN

---