用于检测浏览器窗口的滚动顶部的跨浏览器方法。

What is the best cross-browser way to detect the scrollTop of the browser window? I prefer not to use any pre-built code libraries because this is a very simple script, and I don't need all of that deadweight.

什么是最好的跨浏览器的方法来检测浏览器窗口的滚动条?我不喜欢使用任何预构建的代码库，因为这是一个非常简单的脚本，而且我不需要所有这些重量级代码。

9 个解决方案

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

#2

Or just simple as:

或者只是简单的为:

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

#3

If you don't want to include a whole JavaScript library, you can often extract the bits you want from one.

如果不想包含整个JavaScript库，通常可以从其中提取所需的位。

For example, this is essentially how jQuery implements a cross-browser scroll(Top|Left):

例如，jQuery基本上就是这样实现跨浏览器滚动的(左上|):

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

Note: you'll notice that the above code contains a browserSupportsBoxModel variable which is undefined. jQuery defines this by temporarily adding a div to the page and then measuring some attributes in order to determine whether the browser correctly implements the box model. As you can imagine this flag checks for IE. Specifically, it checks for IE 6 or 7 in quirks mode. Since the detection is rather complex, I've left it as an exercise for you ;-), assuming you have already used browser feature detection elsewhere in your code.

注意:您会注意到上面的代码包含一个未定义的browserSupportsBoxModel变量。jQuery通过临时向页面添加div来定义这一点，然后测量一些属性，以确定浏览器是否正确地实现了box模型。可以想象这个标志检查IE。具体地说，它以古怪的方式检查ie6或ie7。由于检测是相当复杂的，我把它留给您作为练习;-)，假设您已经在代码的其他地方使用了浏览器特性检测。

Edit: If you haven't guessed already, I strongly suggest you use a library for these sorts of things. The overhead is a small price to pay for robust and future-proof code and anyone would be much more productive with a cross-browser framework to build upon. (As opposed to spending countless hours banging your head against IE).

编辑:如果你还没有猜到，我强烈建议你用图书馆来做这类事情。对于健壮的、可验证的代码来说，这种开销是很小的代价，任何人都可以在跨浏览器框架的基础上提高效率。(而不是花上无数个小时来敲你的脑袋)。

#4

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

#5

I've been using window.scrollY || document.documentElement.scrollTop.

我一直在使用窗口。scrollY | | document.documentElement.scrollTop。

window.scrollY covers all browsers except IEs.
document.documentElement.scrollTop covers IE.

窗口。scrollY覆盖所有浏览器，除了IEs。document.documentElement。scrollTop涵盖了IE。

#6

YUI 2.8.1 code does this:

YUI 2.8.1代码是这样的:

function getDocumentScrollTop(doc) 
{
   doc = doc || document;

   //doc.body.scrollTop is IE quirkmode only
   return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
}

I think jQuery 1.4.2 code (a bit translated for humans) and supposing I understood it properly does this:

我认为jQuery 1.4.2代码(为人类翻译了一点)，如果我理解正确的话，它可以做到:

function getDocumentScrollTop(doc) 
{
   doc = doc || document;
   win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9

   result = 0;
   if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined')
      result = win.pageYOffset;
   else
      result = (jQuery.support.boxModel && document.documentElement.scrollTop) || 
               document.body.scrollTop;

   return result;
}

Unfortunatley extracting the value of jQuery.support.boxModel is almost impossible because you would have to add a temporary child element into document and do the same tests jQuery does.

不幸的是，它提取了jQuery.support的值。boxModel几乎是不可能的，因为您必须在文档中添加一个临时的子元素，并使用jQuery进行相同的测试。

#7

I know its been quite a while since this thread was updated, but this is a function I created that allows developers to find the root element that actually hosts has a working "scrollTop" property. Tested on Chrome 42 and Firefox 37 for Mac OS X (10.9.5):

我知道自从这个线程被更新以来已经有很长一段时间了，但是这是我创建的一个函数，它允许开发人员找到根元素，它实际上托管有一个“scrollTop”属性。在Chrome 42和Firefox 37上测试Mac OS X (10.9.5):

function getScrollRoot(){
    var html = document.documentElement, body = document.body,
        cacheTop = ((typeof window.pageYOffset !== "undefined") ? window.pageYOffset : null) || body.scrollTop || html.scrollTop, // cache the window's current scroll position
        root;

    html.scrollTop = body.scrollTop = cacheTop + (cacheTop > 0) ? -1 : 1;
    // find root by checking which scrollTop has a value larger than the cache.
    root = (html.scrollTop !== cacheTop) ? html : body;

    root.scrollTop = cacheTop; // restore the window's scroll position to cached value

    return root; // return the scrolling root element
}

// USAGE: when page is ready: create a global variable that calls this function.

var scrollRoot = getScrollRoot();

scrollRoot.scrollTop = 10; // set the scroll position to 10 pixels from the top
scrollRoot.scrollTop = 0; // set the scroll position to the top of the window

I hope you find this useful! Cheers.

我希望你觉得这个有用!欢呼。

#8

This works well from IE5 to IE11. It also supports all major new browsers.

这从IE5到IE11都很好用。它还支持所有主要的新浏览器。

var scrollTop = (document.documentElement && document.documentElement.scrollTop) ||
                (document.body.scrollTop) || (document.scrollingElement);

#9

-3

to save you all the trouble use a framework such as jquery or mootools that calculates all these values in one line (cross browser) in mootools its $('element').getTop(); in jquery you will need a plugin named dimensions if i remember correctly although most of the time even without a framework you can actually use element.getScrollTop(); to get what you'll need the only problem is on IE7 and below this calculation is somewhat buggy as it doesn not take the position value of the element into consideration for example if you got a position: absolute css attribute for that element the calculation is performed on the parent element of that element

为了避免所有麻烦，使用jquery或mootools之类的框架，它们在mootools的$('element').getTop()中以一行(跨浏览器)计算所有这些值;如果我没记错的话，在jquery中你需要一个名为dimensions的插件，尽管大多数时候即使没有框架你也可以使用element.getScrollTop();得到你需要的唯一的问题是在IE7和下面这个计算有点错误,因为它并没有考虑元素的位置值例如如果你有一个位置:绝对的css属性的元素上执行计算该元素的父元素

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

#2