javascript - 检测滚动位置使用什么值 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，我得到类似于以下内容的日志:

窗口:未定义； documentElement:0(始终为 0)； body:[某个数字](变量数字-实际滚动)

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

此外，该脚本的目的是根据网站是否是 iframe(嵌入)来获取适当的滚动位置。当它不是适当的值时，它是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 对于 iframe 内容来说是没有用的。但为了防止 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，因为它实际上可能引用父窗口而不是 iframe - 不要引用我的观点。我对 iframe 不太熟悉，我只是在玩弄你的 fiddle