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 implements跨浏览器滚动（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 defines this暂时向页面添加div，然后测量某些属性，以确定浏览器是否正确实现了盒子模型。你可以想象这个标志会检查IE。具体来说，它会检查IE 6 or 7 in quirks mode。由于检测相当复杂，我把它作为练习留给你;-)，假设你已经在代码中的其他地方使用了browser feature detection。

编辑：如果您还没有猜到，我强烈建议您使用库来处理这些事情。对于强大且面向未来的代码而言，开销是一个很小的代价，任何人都可以通过跨浏览器框架来提高效率。（而不是花费无数个小时撞击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");

Answer 6

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

我认为 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提取jQuery.support.boxModel的值几乎是不可能的，因为你必须在文档中添加一个临时子元素并执行jQuery所做的相同测试。

Answer 7

我知道自从这个线程更新以来已经有一段时间了，但这是我创建的一个函数，它允许开发人员找到实际主机具有工作的根元素＆＃34; scrollTop＆＃34;属性。在适用于Mac OS X（10.9.5）的Chrome 42和Firefox 37上测试：

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

我希望你觉得这很有用！欢呼声。

Answer 8

这从IE5到IE11运行良好。它还支持所有主要的新浏览器。

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

Answer 9

我相信在现代浏览器中获取scrollTop的最佳方法是使用

const scrollTop = document.scrollingElement.scrollTop

如果这不起作用，您也可以尝试

const scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop, document.scrollingElement.scrollTop)

Answer 10

不需要额外的库，请使用以下代码段：

const scrollTop = 
    (window.pageYOffset !== undefined) ? 
     window.pageYOffset :
    (document.documentElement || document.body.parentNode || document.body).scrollTop;

Answer 11

使用jquery或mootools等框架来省去所有麻烦在一行中计算所有这些值（跨浏览器）在mootools中它的$（'element'）。getTop（）; 在jquery中，如果我没记错的话，你需要一个名为dimension的插件虽然大多数时候即使没有框架你也可以实际使用element.getScrollTop（）;得到你需要的东西唯一的问题是在IE7及以下这个计算有点错误，因为它没有考虑元素的位置值例如，如果您有一个位置：该元素的绝对css属性计算在该元素的父元素上执行

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

11 个答案: