[javascript] JavaScript는 스크롤의 창 X / Y 위치를 얻습니다.

JAVASCRIPT / 글쓴이

현재 볼 수있는 창의 위치를 ​​가져 오는 방법을 찾고 싶습니다 (총 페이지 너비 / 높이 기준).이를 사용하여 한 섹션에서 다른 섹션으로 스크롤을 강제 할 수 있습니다. 그러나 어떤 객체가 브라우저의 실제 X / Y를 보유하는지 추측 할 때 엄청난 옵션이있는 것 같습니다.

이 중 IE 6+, FF 2+ 및 Chrome / Safari가 작동하도록하려면 무엇이 필요합니까?

window.innerWidth
window.innerHeight
window.pageXOffset
window.pageYOffset
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.scrollLeft
document.documentElement.scrollTop
document.body.clientWidth
document.body.clientHeight
document.body.scrollLeft
document.body.scrollTop

그리고 다른 사람이 있습니까? 창이 어디에 있는지 알면 window.scrollBy(x,y);원하는 지점에 도달 할 때까지 천천히 호출되는 이벤트 체인을 설정할 수 있습니다 .

답변

jQuery (v1.10)가이를 찾는 방법은 다음과 같습니다.

var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

그건:

  • window.pageXOffset먼저 테스트 하고 존재하는 경우 사용합니다.
  • 그렇지 않으면을 사용합니다 document.documentElement.scrollLeft.
  • 그런 다음 document.documentElement.clientLeft존재하면 뺍니다 .

document.documentElement.clientLeft/를 빼면 Top테두리 (패딩 또는 여백이 아니라 실제 테두리)를 루트 요소에 적용한 상황에서 특정 브라우저에서만 적용 할 수 있습니다.

답변

아마도 더 간단 할 것입니다.

var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;

크레딧 : so.dom.js # L492

답변

순수한 자바 스크립트를 사용하면 Window.scrollX 및 Window.scrollY를 사용할 수 있습니다

window.addEventListener("scroll", function(event) {
    var top = this.scrollY,
        left =this.scrollX;
}, false);

노트

pageXOffset 속성은 scrollX 속성의 별칭이며 pageYOffset 속성은 scrollY 속성의 별칭입니다.

window.pageXOffset == window.scrollX; // always true
window.pageYOffset == window.scrollY; // always true

여기에 간단한 데모가 있습니다 

window.addEventListener("scroll", function(event) {

    var top = this.scrollY,
        left = this.scrollX;

    var horizontalScroll = document.querySelector(".horizontalScroll"),
        verticalScroll = document.querySelector(".verticalScroll");

    horizontalScroll.innerHTML = "Scroll X: " + left + "px";
      verticalScroll.innerHTML = "Scroll Y: " + top + "px";

}, false);
*{box-sizing: border-box}
:root{height: 200vh;width: 200vw}
.wrapper{
    position: fixed;
    top:20px;
    left:0px;
    width:320px;
    background: black;
    color: green;
    height: 64px;
}
.wrapper div{
    display: inline;
    width: 50%;
    float: left;
    text-align: center;
    line-height: 64px
}
.horizontalScroll{color: orange}
<div class=wrapper>
    <div class=horizontalScroll>Scroll (x,y) to </div>
    <div class=verticalScroll>see me in action</div>
</div>

스 니펫 확장

답변

function FastScrollUp()
{
     window.scroll(0,0)
};

function FastScrollDown()
{
     $i = document.documentElement.scrollHeight ;
     window.scroll(0,$i)
};
 var step = 20;
 var h,t;
 var y = 0;
function SmoothScrollUp()
{
     h = document.documentElement.scrollHeight;
     y += step;
     window.scrollBy(0, -step)
     if(y >= h )
       {clearTimeout(t); y = 0; return;}
     t = setTimeout(function(){SmoothScrollUp()},20);

};


function SmoothScrollDown()
{
     h = document.documentElement.scrollHeight;
     y += step;
     window.scrollBy(0, step)
     if(y >= h )
       {clearTimeout(t); y = 0; return;}
     t = setTimeout(function(){SmoothScrollDown()},20);

}

답변