跨浏览器检测浏览器窗口scrollTop的方法

IT技术 javascript cross-browser
2021-02-17 05:43:40

检测浏览器窗口的 scrollTop 的最佳跨浏览器方法是什么?我不喜欢使用任何预先构建的代码库,因为这是一个非常简单的脚本,而且我不需要所有这些无谓的东西。

6个回答
function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

alert(getScrollTop())
@Roman 我认为只有当 pageYOffset 为 0 时它才会失败,这可能意味着根据此页面上的其他评论判断另一部分将是未定义的,所以如果你只是在最后添加一个或 0,它应该可以工作。像这样,var scrollTop = pageYOffset || (document.documentElement.clientHeight ? document.documentElement.scrollTop : document.body.scrollTop) || 0;
2021-04-22 05:43:40
对 Brave Browser 使用 window.pageYOffset 而不是 pageYOffset 以避免在窗口可用之前调用时出现间歇性未定义错误。
2021-04-25 05:43:40
这个简短的版本是否足够正确? var scrollTop = pageYOffset || (document.documentElement.clientHeight ? document.documentElement.scrollTop : document.body.scrollTop);
2021-05-02 05:43:40
丑陋的警报!使用 console 和 console.log 代替!,无论如何都是好的答案,但是“//大多数浏览器”的浏览器支持是什么 - 或者更好的 IEwhatnumber+ 支持?
2021-05-05 05:43:40
此方法似乎不适用于 Mac 或 Linux 上的 Firefox 浏览器。
2021-05-11 05:43:40

或者就这么简单:

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
这不是跨浏览器。
2021-04-24 05:43:40
不能在 iPad 和可能的其他设备/浏览器(Chrome?)上使用,你需要window.pageYOffset那里。
2021-04-25 05:43:40
适用于移动版Safari 5 和 7、FireFox 31、Chrome 37、Opera 24、IE 5-11。根据quirksmode.org/dom/w3c_cssom.html#t35这是使跨浏览器。所以谢谢!很简单。
2021-05-02 05:43:40
这是这里最有用的答案,甚至不需要函数(就风格而言)。
2021-05-08 05:43:40

如果您不想包含整个 JavaScript 库,您通常可以从中提取您想要的位。

例如,这本质上是jQuery 实现跨浏览器滚动(Top|Left)的方式:

function getScroll(method, element) {
  // The passed in `method` value should be 'Top' or 'Left'
  method = 'scroll' + method;
  return (element == window || element == document) ? (
    self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||
    (browserSupportsBoxModel && document.documentElement[method]) ||
    document.body[method]
  ) : element[method];
}
getScroll('Top', element);
getScroll('Left', element);

注意:您会注意到上面的代码包含一个browserSupportsBoxModel未定义变量。jQuery通过在页面上临时添加一个 div 然后测量一些属性来确定浏览器是否正确实现了框模型。正如您可以想象的那样,此标志会检查 IE。具体来说,它会在 quirks mode 中检查IE 6 或 7由于检测相当复杂,我将它留给您作为练习 ;-),假设您已经在代码的其他地方使用了浏览器 功能 检测

编辑:如果你还没有猜到,我强烈建议你使用一个库来处理这些事情。开销是为健壮且面向未来的代码支付的一小部分代价,任何人都可以使用跨浏览器框架进行构建,从而提高工作效率。(而不是花费无数个小时来对抗 IE)。

我一直在用window.scrollY || document.documentElement.scrollTop

window.scrollY涵盖除 IE 之外的所有浏览器。
document.documentElement.scrollTop涵盖 IE。

@Jason:我想补充一点,我说的是你对这个问题的回答是最干净、最直接的,而不是我上面的评论。
2021-04-25 05:43:40
第一个表达式也可以是window.pageYOffset我提到这一点是因为它pageYOffset似乎更具历史意义,而且我scrollY不常看到根据 MDN,它们是相同的。无论如何,这是迄今为止最干净和最直接的解决方案,应该是首选,因为它首先解决现代浏览器的问题,因此不会因为它们是最新的而惩罚它们。
2021-05-03 05:43:40
function getSize(method) {
  return document.documentElement[method] || document.body[method];
}
getSize("scrollTop");