window.pageYOffset

window.pageYOffset

window.pageYOffset 요소는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다. window.pageYOffset 요소는 속성 값만 가져올 수 있는 읽기 전용 속성이며, window.pageYOffset 요소와 window.scrollY 요소는 동일합니다.

---

window.pageYOffset

window.pageYOffset 요소는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다.

특징	설명
유형(type)	window
버전(version)	--
결과값(return)	숫자(number)
사용성	★★★☆☆

문법(Syntax)

window.pageYOffset / pageYOffset

//속성 값을 가져오는 경우
document.querySelector("div").innerHTML = window.pageYOffset;

//속성 값을 가져오는 경우
document.querySelector("div").innerHTML = pageYOffset;

정의(Definition)

• window.pageYOffset 요소는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다.
• window.pageYOffset 요소는 속성값만 가져올 수 있는 읽기 전용 속성입니다.
• window.pageYOffset 요소와 window.scrollY 요소는 동일합니다.
• window는 생략 가능합니다.

스크롤과 관련된 메서드(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)

스크롤 위치 값을 구하는 예제입니다.

0 px

0 px

0 px

0 px

0 px

0 px

스크롤을 하면 값이 표시됩니다.

HTML

CSS

SCRIPT

<div class="jsample">
    <div class="circle">
        <span class="px">0</span> px
    </div>
    <div class="circle">
        <span class="py">0</span> px
    </div>
    <div class="circle">
        <span class="sl">0</span> px
    </div>
    <div class="circle">
        <span class="st">0</span> px
    </div>
    <div class="circle">
        <span class="sx">0</span> px
    </div>
    <div class="circle">
        <span class="sy">0</span> px
    </div>
</div>

.jsample {
    text-align: center;
}
.jsample .circle {
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #dfecfa;
    border: 1px dashed #4390E1;
    color: #4390E1;
    text-align: center;
    display: inline-block;
    margin: 5px 5px 25px;
    position: relative;
}
.jsample .circle::before {
    position: absolute;
    left: 50%;
    bottom: -100px;
    transform: translateX(-50%);
}
.jsample .circle:nth-child(1)::before {
    content: "pageXOffset";
}
.jsample .circle:nth-child(2)::before{
    content: "pageYOffset";
}
.jsample .circle:nth-child(3)::before {
    content: "scrollLeft";
}
.jsample .circle:nth-child(4)::before{
    content: "scrolltop";
}
.jsample .circle:nth-child(5)::before {
    content: "scrollX";
}
.jsample .circle:nth-child(6)::before{
    content: "scrollY";
}

function scroll(){
    document.querySelector(".jsample .px").innerHTML = window.pageXOffset;
    document.querySelector(".jsample .py").innerHTML = window.pageYOffset;
    document.querySelector(".jsample .sl").innerHTML = document.documentElement.scrollLeft;
    document.querySelector(".jsample .st").innerHTML = document.documentElement.scrollTop;
    document.querySelector(".jsample .sx").innerHTML = window.scrollX;
    document.querySelector(".jsample .sy").innerHTML = window.scrollY;
    
    requestAnimationFrame(scroll);
}
scroll();

호환성(Compatibility)

						6	7	8	9	10	11
pageYOffset	○	○	○	○	○	❌	❌	❌	○	○	○	○	○	○

참고 사이트(Reference)

• MDN

---