JavaScript obtenir la position X/Y fenêtre pour le défilement

Question

J'espère trouver un moyen d'obtenir la position de la fenêtre visible (par rapport à la largeur/hauteur totale de la page) afin que je puisse l'utiliser pour forcer un défilement d'une section à un autre. Cependant, il semble y avoir une quantité énorme d'options quand il s'agit de deviner quel objet contient le vrai X/Y pour votre navigateur.

De quoi dois-je m'assurer qu'IE 6+, FF 2+ et Chrome/Safari fonctionnent?

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 

Et y en a-t-il d'autres? Une fois que je sais où la fenêtre est, je peux définir une chaîne d'événements qui appellera lentement window.scrollBy(x,y); jusqu'à ce qu'il atteigne le point désiré.

Answer 1

La méthode jQuery (v1.10) utilise pour trouver c'est:

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

C'est:

• Il teste window.pageXOffset d'abord et utilise que si elle existe. Dans les autres cas, il utilise document.documentElement.scrollLeft. Il soustrait alors document.documentElement.clientLeft s'il existe.

La soustraction de document.documentElement.clientLeft/Top ne semble être nécessaire pour corriger les situations où vous avez appliqué une bordure (non rembourrage ou de la marge, mais la frontière réelle) à l'élément racine, et que, peut-être que dans certains navigateurs.

Answer 2

Peut-être plus simple;

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

Crédits: so.dom.js#L492

Answer 3

L'utilisation de JavaScript pur, vous pouvez utiliser Window.scrollX et Window.scrollY

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

Remarques

La propriété pageXOffset est un alias pour la propriété scrollx, et le propriété pageYOffset est un alias pour la propriété scrolly:

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

Voici une démonstration rapide

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>

Answer 4

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

}