JavaScript 获取滚动的窗口 X/Y 位置

IT技术 javascript
2021-01-27 11:46:52

我希望找到一种方法来获取当前可见窗口的位置（相对于总页面宽度/高度），以便我可以使用它来强制从一个部分滚动到另一个部分。然而，在猜测哪个对象拥有浏览器的真实 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);直到到达我想要的点。

4个回答

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来纠正您将边框（不是填充或边距，而是实际边框）应用于根元素的情况，并且可能仅在某些浏览器中。

这是 $(window).scrollTop() 的代码吗？? 在此答案中也包含 jQuery 方法可能会很有用。
2021-03-12 11:46:52
方法是什么？
2021-03-14 11:46:52
它现在有效。我认为他们在 webkit 中有一个非常临时的错误并且他们已经修复了它。我写了一个插件，因为那个错误而完全坏了，用户向我报告了这个。非常可怕，这种基本的东西可能会坏掉
2021-03-26 11:46:52
我发布的代码是对jQuery.fn.offset(). scrollTop()/ scrollLeft()do 基本一样，但不要减去clientTop / clientLeft。
2021-03-30 11:46:52
托马斯 - 你是完全正确的。我的错。评论已删除。我重新阅读了您的评论并意识到您的解决方案根本不是 Jquery 解决方案。道歉。改装了。
2021-04-04 11:46:52

也许更简单；

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

学分：so.dom.js#L492

现在，除了 MSIE（所有版本），以上所有内容都是所有现代浏览器上 window.scrollY 的别名。只要 MSIE11 仍在场景窗口中。pageYOffset 可能是最好的作品 - 任何地方，直到您可以完全删除 MSIE。
2021-03-13 11:46:52
这比答案代码更有效，但是……答案代码不起作用，一点也不……
2021-03-27 11:46:52
我想知道为什么不使用document.documentElement.scrollTopwhich 无处不在。
2021-03-30 11:46:52
完美跨浏览器安全！最佳解决方案。
2021-04-10 11:46:52

使用纯 javascript，您可以使用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>

这不适用于 IE。IE 需要类似的东西window.pageYOffset
2021-03-28 11:46:52
您链接到的页面说“为了跨浏览器兼容性，请使用 window.pageYOffset 而不是 window.scrollY。”
2021-04-01 11:46:52 
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);

}
其它你可能感兴趣的问题
上一篇使用 jquery 检查 div 是否有溢出元素 下一篇检查是否使用 Javascript 加载了 jquery