window.scrollX
window.scrollX 요소는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다. window.scrollX 요소는 속성값만 가져올 수 있는 읽기 전용 속성이며, window.scrollX 요소와 window.pageXOffset 요소는 동일합니다.
window.scrollX
window.scrollX 요소는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다.
특징 | 설명 |
---|---|
유형(type) | window |
버전(version) | -- |
결과값(return) | 숫자(number) |
사용성 | ★★★☆☆ |
문법(Syntax)
window.scrollX / scrollX
//속성 값을 가져오는 경우
document.querySelector("div").innerHTML = window.scrollX;
//속성 값을 가져오는 경우
document.querySelector("div").innerHTML = scrollX;
정의(Definition)
- window.scrollX 요소는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다.
- window.scrollX 요소는 속성값만 가져올 수 있는 읽기 전용 속성입니다.
- window.scrollX 요소와 window.pageXOffset 요소는 동일합니다.
- 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 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
scrollX | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |