检测用于滚动位置的值 javascript

Question

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

window.scrollTop

document.documentElement.scrollTop

document.body.scrollTop

fiddle的js:

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

fiddle的CSS：

html{ height : 300% }

使用 Chrome，我得到的日志类似于：

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

注意：为了回应 charlieftl 的评论，我需要制作一个脚本来检测我列出的三个值中的哪一个适合跟踪滚动位置。

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

注意： jQuery 解决方案值得赞赏，但原生 javascript 是首选。

Answer 1

因为我很好，所以我在几个浏览器上测试了这个 fiddle（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 */

注意： 但是，我会谨慎使用 window，因为它实际上可能引用父 window 而不是 iframe -don引用我的话。我对 iframe 不是很熟悉，我只是在玩你的 fiddle

检测用于滚动位置的值 javascript

Detect what value to use for scroll positions javascript

javascript

iframe

jquery

cross-browser