JavaScript holt die X / Y-Position des Fensters zum Scrollen

Ich hoffe, einen Weg zu finden, um die Position des aktuell sichtbaren Fensters (relativ zur Gesamtseitenbreite / -höhe) zu ermitteln, damit ich damit einen Bildlauf von einem Abschnitt zum anderen erzwingen kann. Es scheint jedoch eine enorme Anzahl von Optionen zu geben, wenn es darum geht, zu erraten, welches Objekt das wahre X / Y für Ihren Browser enthält.

Welche davon muss ich sicherstellen, dass IE 6+, FF 2+ und Chrome / Safari funktionieren?

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

Und gibt es noch andere? Sobald ich weiß, wo sich das Fenster befindet, kann ich eine Ereigniskette festlegen, die langsam aufruft, window.scrollBy(x,y);bis sie meinen gewünschten Punkt erreicht.

Die Methode, mit der jQuery (v1.10) dies findet, lautet:

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

Das ist:

• Es testet window.pageXOffsetzuerst und verwendet das, wenn es existiert.
• Ansonsten wird es verwendet document.documentElement.scrollLeft.
• Es subtrahiert dann, document.documentElement.clientLeftwenn es existiert.

Die Subtraktion von document.documentElement.clientLeft/ Topscheint nur erforderlich zu sein, um Situationen zu korrigieren, in denen Sie einen Rand (nicht Auffüllen oder Rand, sondern tatsächlicher Rand) auf das Stammelement angewendet haben, und zwar möglicherweise nur in bestimmten Browsern.

Vielleicht einfacher;

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

Credits: so.dom.js # L492

Mit reinem Javascript können Sie Window.scrollX und Window.scrollY verwenden

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

Anmerkungen

Die pageXOffset-Eigenschaft ist ein Alias ​​für die scrollX-Eigenschaft, und die pageYOffset-Eigenschaft ist ein Alias ​​für die scrollY-Eigenschaft:

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

Hier ist eine kurze Demo

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);

}