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

检测浏览器窗口的scrollTop的最佳跨浏览器方式是什么？我不想使用任何预先构建的代码库,因为这是一个非常简单的脚本,我不需要所有这些自重.

1> kennebec..：

---

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

---

此方法似乎不适用于Mac或Linux上的Firefox浏览器.

2> 小智..：

---

或者只是简单:

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

---

不适用于iPad和其他设备/浏览器(Chrome？),你需要`window.pageYOffset`.

---

这不是跨浏览器.

3> brianpeiris..：

---

如果您不想包含整个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.具体来说,它以怪癖模式检查IE 6或7.由于检测相当复杂,我把它作为练习留给你;-),假设你已经在代码的其他地方使用了浏览器 功能 检测.

编辑:如果您还没有猜到,我强烈建议您使用库来处理这些事情.对于强大且面向未来的代码而言,开销是一个很小的代价,任何人都可以通过跨浏览器框架来提高工作效率.(而不是花费无数个小时撞击IE).

4> Jason Lydon..：

---

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

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

---

第一个表达式也可以是`window.pageYOffset`.我之所以提到这一点是因为`pageYOffset`似乎更具历史性,而且我并不经常看到`scrollY`.根据MDN,他们是一样的.在任何情况下,这是迄今为止最干净,最直接的解决方案,应该首选,因为它首先解决了现代浏览器,因此不会因为它们是最新的而受到惩罚.

5> daluege..：

---

function getSize(method) {
  return document.documentElement[method] || document.body[method];
}
getSize("scrollTop");