使用JavaScript的DIV的滚动百分比

Question

const rightSide = document.querySelector("#rightSide");

let scrollPercentage = () => {
  let h = document.documentElement;
  let st = h.scrollTop || document.body.scrollTop;
  let sh = h.scrollHeight || document.body.scrollHeight;
  let percent = st / (sh - h.clientHeight) * 100;
  console.log(percent);
}

rightSide.onscroll = scrollPercentage;

.right-side {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 90%;
  width: 90%;
  background-color: #eee;
  overflow-y: scroll;
}

.top-page {
  width: 100%;
  height: 100%;
  background-color: red;
}

.bot-page {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

<div class="right-side" id="rightSide">
  <div id="top-page" class="top-page"></div>
  <div id="bot-page" class="bot-page"></div>
</div>

我正在制作一个网站，我想获得Div的滚动百分比。我在YouTube上使用了Tyler Pott的视频 https：//youtu.be/youtu.be/-fjsedzaers 他做到了到整个页面（使用身体）。这是我的代码：

 const rightSide = document.querySelector("#rightSide")

  let scrollPercentage = () => {
    let h = document.documentElement;
    let st = h.scrollTop || document.body.scrollTop;
    let sh = h.scrollHeight || document.body.scrollHeight;

    let percent = st / (sh - h.clientHeight) * 100;
    console.log(percent);
  }

  rightSide.onscroll = scrollPercentage;

当我运行此操作时，控制台只会输出“ NAN”，这是可以预期的。我不确定要将该代码转移到DIVS上，该怎么办。我尝试使用类似的东西

  const topPage = document.querySelector("#top-page");

，然后在document.body.scrolltop等中添加台词而不是主体。但显然这不起作用。

这就是HTML的外观，顶页具有右侧div的宽度和高度，底面页面具有相同的宽度，但右侧Div的最小高度。

 <div class="right-side" id="rightSide">
  <div id="top-page" class="top-page"></div>
  <div id="bot-page" class="bot-page"></div>
 </div>

Answer 1

回到这个问题，我知道我必须了解分配给变量的值，以使方程式更简单。

因此，快速搜索纪录片使我找到了这个答案：

“纪录片返回文档的根元素（例如，HTML文档的元素）”

，然后，我意识到，也许这是问题，并且是问题。我将右侧分配给H，这就是所需要的。

让H = rightside;

不确定这是否完全正确，有时在滚动结束时您可以获得100.05或更多，但我不需要精确的数字。希望这会有所帮助。