Window 与 document.documentElement 最佳实践答案

【问题标题】：Window Vs document.documentElement best practicesWindow 与 document.documentElement 最佳实践
【发布时间】：2022-02-05 00:36:05
【问题描述】：

我有一个简单的页面，我想在向下滚动时固定顶部 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);
};

【问题讨论】：

“最佳实践”问题往往会以基于意见的方式结束。您可能应该将那部分省略或定义您需要“最佳”的含义（例如“哪个更快？”）

标签： javascript scrolltop onscroll

【解决方案1】：

一般来说，DOM API 很难。根据您所做的工作，jQuery 有可能在可理解性、可读性、可维护性和跨平台兼容性方面为您的开发带来更多收益。

话虽如此，document.documentElement 是对文档的<HTML/> 节点的引用。除非发生了真正奇怪的事情（例如html { overflow: scroll; }），否则<HTML/> 的scrollTop 应始终为0，就像其他未滚动的节点一样。

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

作为记录，如果你想创建一个滚动到页面顶部的链接，根本不需要 JavaScript，只需创建一个指向 # 的链接。只要不拦截链接的原生处理，定义的行为就是回滚到页面顶部。

【讨论】：

我试过了：`window.onscroll = function(){ var x = window.scrollTop; if(x > 0){ //函数 }`
窗口不是DOM节点，没有scrollTop属性（window.hasOwnProperty('scrollTop'); // => false）；但是，您可以使用window.scrollY 来查找窗口的滚动偏移量。
太棒了，感谢您区分 DOM 和 BOM。所以我用window.onscroll替换了document.documentElement.onscroll； AND document.documentElement.scrollTop 和 window.pageYOffset 这将实现我的这个项目的目标并消除混乱。

【解决方案2】：

clarifying-property-discrepancy 是 document.documentelement.scrollHeight 和 window.scroll(0,0)，window.scrollY/window.offsetHeight/window.innerHeight 所有 html 必须是 div C or C++ 类的东西-or-other，而 div 元素只有 offsetTop 和 scrollTop 可以设置，从孩子的 offsetTop 到；只有document.documentelement 可以访问scrollHeight，它甚至可能不是对窗口的直接引用，而是它的容器。

【讨论】：