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

检测浏览器窗口滚动顶部的最佳跨浏览器方式是什么？我不喜欢使用任何预构建的代码库，因为这是一个非常简单的脚本，而且我不需要所有的死角。

为了省去所有的麻烦，请使用jquery或mootools之类的框架 在一行中计算所有这些值的（跨浏览器） 在mootools中，它的$（'element'）.getTop（）； 在jquery中，如果我没记错的话，您需要一个名为dimensions的插件 尽管大多数情况下，即使没有框架，您也可以实际使用element.getScrollTop（）；得到你需要的东西 唯一的问题是IE7及其以下版本的计算有点麻烦，因为它没有考虑元素的位置值 例如，如果您得到该元素的position:absoluteCSS属性

---

计算是在该元素的父元素上执行的

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

例如，这就是跨浏览器滚动的基本方式（左上角）：

注意：您会注意到上面的代码包含一个未定义的

browserSupportsBoxModel

变量。通过向页面临时添加div，然后测量一些属性，以确定浏览器是否正确实现了长方体模型。正如你可以想象的，这个标志检查IE。具体来说，它检查IE。由于检测相当复杂，我将其作为练习留给您；-），假设您已经在代码的其他地方使用过

---

编辑：如果你还没有猜到，我强烈建议你使用一个库来处理这类事情。对于健壮且经得起未来考验的代码来说，开销是一个很小的代价，任何人都可以在跨浏览器框架的基础上更高效地工作。（而不是花无数的时间用头撞击IE）。

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

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

我认为jQuery 1.4.2代码（为人类翻译了一点），假设我正确理解了它，它会这样做：

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

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

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

函数getDocumentScrollTop（文档） { 文件=文件| |文件； win=doc.defaultView | | doc.parentWindow；//parentWindow用于IE<9 结果=0； if（win中的pageYOffset）//我不知道他们为什么使用这个，可能他们测试过它比使用：if（typeof win.pageYOffset！=='undefined'） 结果=win.pageYOffset； 其他的 结果=（jQuery.support.boxModel&&document.documentElement.scrollTop）| document.body.scrollTop； 返回结果； } 不幸的是，提取

jQuery.support.boxModel的值几乎是不可能的，因为您必须向文档中添加一个临时子元素，并执行jQuery所做的相同测试。
或者只需简单如下：

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

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

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

我希望你觉得这个有用！干杯。
我一直在使用
window.scrollY | | document.documentElement.scrollTop

窗口。滚动
覆盖除IE以外的所有浏览器。

document.documentElement.scrollTop
涵盖IE.
这在IE5到IE11之间运行良好。它还支持所有主要的新浏览器

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

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

const scrollTop = document.scrollingElement.scrollTop

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

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

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

const scrollTop=
（window.pageYOffset！==未定义）？
window.pageYOffset：
（document.documentElement | | document.body.parentNode | | document.body）；
FYI-问题说明“我不喜欢使用任何预构建的代码库”。您被标记为mooTools仍然是一个预构建的代码库。感谢您花时间参与讨论，请仔细阅读问题，否则您的销售代表将受到打击。另外，这种方法的另一个问题是，如果您试图在主窗口滚动条中检测到它，非IE浏览器将滚动元素，IE将滚动。所以，你必须先弄清楚“元素”是什么。这种方法似乎不适用于Mac或Linux上的Firefox浏览器。丑陋警报！请改用console和console.log，无论如何，答案不错，但是“//大多数浏览器”-或更好的IEwhatnumber+支持的浏览器支持是什么？这个简短版本足够正确吗<代码>var scrollTop=pageYOffset | |（document.documentElement.clientHeight？document.documentElement.scrollTop:document.body.scrollTop）

@Roman我认为只有当pageYOffset为0时，它才会失败，这可能意味着根据此页面上的其他注释判断，其他部分将是未定义的，因此如果您只是在末尾添加一个或0，那么它应该可以工作。与此类似，

var scrollTop=pageYOffset | | |（document.documentElement.clientHeight？document.documentElement.scrollTop:document.body.scrollTop）| 0使用window.pageYOffset，而不仅仅是pageYOffset，以避免在窗口可用之前调用时出现间歇性的未定义错误。在iPad和其他设备/浏览器（Chrome？）上不起作用，您需要
窗口。pageYOffset
在那里。这不是跨浏览器。适用于我在mobile Safari 5和7、FireFox 31、，Chrome 37，Opera 24，即5-11。根据这是如此跨浏览器。谢谢你！这是这里最有用的答案，甚至不需要函数（就风格而言）。第一个表达式也可以是
window.pageYOffset
。我之所以提到这一点，是因为
pageYOffset
似乎更具历史性，而且我很少看到
scrollY
。根据MDN，他们是一样的。在任何情况下，这是迄今为止最干净、最直接的解决方案，应该预先处理
const scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop, document.scrollingElement.scrollTop)