检测用于滚动位置javascript的值

Question

我在jsfiddle 上摆弄着，发现了一个潜在的问题。在小提琴中，如果站点嵌入在 iframe 中（它位于 jsfiddle 上），我有一个记录器设置来跟踪滚动的位置。但是，我需要能够使用 javascript 检测我使用的哪个值适合在所有浏览器的 iframe 中跟踪滚动位置。我使用了这些值：

window.scrollTop

document.documentElement.scrollTop

document.body.scrollTop

小提琴的js：

window.addEventListener("scroll",
  function() {
    console.log(
      "window:" + window.scrollTop + 
      "; documentElement:" + document.documentElement.scrollTop + 
      "; body:"+ document.body.scrollTop
    );
  }
);

小提琴的 CSS：

html{ height : 300% }

使用 Chrome，我得到类似于以下内容的日志：

window:undefined; documentElement:0 (always 0); body:[some number] (variable number-actual scroll)

注意：为了响应 charlieftl 的 cmets，我需要编写一个脚本来检测我列出的三个值中的哪一个适合跟踪滚动位置。

此外，脚本的目的是根据网站是否为 iframed（嵌入式）来获得适当的滚动位置。当它不是适当的值时是 window.scrollTop，但在 iframe 中它似乎是 document.body.scrollTop。另外，我需要知道什么时候适合使用 document.documentElement.scrollTop。

注意：欢迎使用 jQuery 解决方案，但首选原生 javascript。

Answer 1

因为我很好，所以我在几个浏览器上测试了这个小提琴（除了 Opera，因为我无法下载它）。

我发现您的脚本在 IE 和 Firefox 中记录了 document.documentElement.scrollTop 的值。在 Chrome 中，它会记录 body.scrollTop 的值。 IE、Chrome 和 Firefox 都记录 undefined 的 window.scrollTop 值。

因此，window.scrollTop 对于 iframed 内容是无用的。但只是为了避免在 Opera 中出现这种情况，我编写了以下代码：

window.scrollTo(0,20);
document.documentElement.scrollTo(0,20);
document.body.scrollTo(0,20);

/* ^^these scroll values are only temporary */

if(isset(window.scrollTop) && window.scrollTop=20)
  alert("use window as object");

if(isset(document.documentElement.scrollTop) && document.documentElement.scrollTop=20)
  alert("use documentElement as object");

if(isset(document.body.scrollTop) && document.body.scrollTop=20)
  alert("use documentElement as object");

window.scrollTo(0,0);
document.documentElement.scrollTo(0,0);
document.body.scrollTo(0,0);

/* ^^default the scroll value back to normal state */

注意：但是，我会警惕使用窗口，因为它可能实际上是在引用父窗口而不是 iframe - 请不要引用我的话。我对 iframe 不是很熟悉，我只是在玩你的小提琴