Window 对比 document.documentElement 最佳实践

Question

我有一个简单的页面，我想让顶部 div 在我向下滚动时固定，"To Top" div 返回到页面顶部。我使用 document.documentElement.scrollTop 来获取我当前从顶部滚动的位置，并使用 document.documentElement.onscroll 来调用该函数。但是当我设置 "To Top" div 时，我不得不使用 window.scrollTo(0,0) 函数返回页面顶部，因为 document.documentElement.scrollTo(0,0) 不起作用。 window 和 document.documentElement 有什么区别？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
  #heading {
    color: white;
    background:steelblue;
    position:absolute;
    left:10px;
    top:-20px;
    padding:5px;
  }
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }

  #top{
    padding:5px;
    border:dotted 2px steelblue;
    box-shadow: -3px -3px 3px;
    background:steelblue;
    width:75px;
    position:fixed;
    right:0;
    bottom:0;
    display:none;
    opacity:0.9;
    border-top-right-radius:100%;
    border-top-left-radius:100%;
    }
  </style>

</head>

<body>

<div id="heading"><h1>Try scrolling the iframe.</h1></div>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

<div onclick="top_function()" id="top">
<h3>To Top</h3>
</div>


<script>
    document.documentElement.onscroll = function(){ //a function is call     when scroll using .onscroll 
var x = document.documentElement.scrollTop;  //x is the current scroll position of document
if(x > 0){  //set greater than zero to avoid the annoytingblinking effect
document.getElementById("heading").style.position="fixed";
document.getElementById("heading").style.top="-20px";
document.getElementById("heading").style.left="10px";
}
else{
document.getElementById("heading").style.position="absolute";
document.getElementById("heading").style.top="-20px";
document.getElementById("heading").style.left="10px";
};

if(x > 100){
document.getElementById("top").style.display="inline-block";

}
else{
document.getElementById("top").style.display="none";
};
}; //ends function onscroll


function top_function(){
window.scrollTo(0,0);
};

Answer 1

总的来说，DOMAPI比较难。根据您正在做的事情，jQuery 有可能在可理解性、可读性、可维护性和跨平台兼容性方面为您的开发带来更多收益。

也就是说，document.documentElement 是对文档的 <HTML/> 节点的引用。除非发生了一些非常奇怪的事情（例如 html { overflow: scroll; }），<HTML/> 的 scrollTop 应该总是 0 就像其他没有滚动的节点一样。

直接页面滚动实际上发生在 window 上。 This fiddle 展示了如何侦听 window 上的滚动偏移量变化，获取 window 的当前滚动偏移量，并将 window 滚动到新的偏移量。

郑重声明，如果您想制作一个滚动到页面顶部的 link，根本不需要 JavaScript，只需创建一个 link至 #。只要不拦截 link 的本机处理，定义的行为就是滚动回页面顶部。

Answer 2

一个clarifying-property-discrepancy是document.documentelement.scrollHeight和window.scroll(0,0),window.scrollY/window.offsetHeight/window.innerHeight 所有html必须是divC or C++classsomething-or-other，而div-elements只有offsetTop 和 scrollTop 可以设置，从 child 的 offsetTop 到；只有 document.documentelement 可以访问 scrollHeight，它甚至可能不是对 window 的直接引用，而是它的容器。

Window 对比 document.documentElement 最佳实践

Window Vs document.documentElement best practices

javascript

scrolltop

onscroll