我希望找到一种方法来获得当前可视窗口的位置(相对于总页面宽度/高度),这样我就可以使用它来强制从一个部分滚动到另一个部分。然而,在猜测哪个对象拥有浏览器的真正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);

那就是:

它测试窗口。首先使用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 #了美洲


使用纯javascript你可以使用Window。scrollX和Window.scrollY

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

笔记

pageXOffset属性是scrollX属性的别名,The 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);

}

也许这一点没有被提及,因为这篇文章已经11年了。

但目前我使用的是window。scrollY(在一个onscroll事件监听器和一个节流函数中),它在大多数时候都工作得很好。 当它不,我使用intersectionObserver API类似的效果,这也是一个相当新的功能,我猜。

if (window.scrollY > desiredAmount) {
   doThis();
}