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

Question

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

Answer 1

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

Answer 2

或者只是简单:

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

Answer 3

如果您不想包含整个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).

Answer 4

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

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

Answer 5

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