div 使用 javascript 的滚动百分比

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 https://youtu.be/-FJSedZAers 上使用了 Tyler Pott 的视频，他对整个页面都这样做（使用正文）。这是我的代码：

 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 等中添加 topPage 而不是正文，但这显然不起作用。

这有点像 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

回到这里我知道我必须理解分配给变量的值才能使等式更简单。

因此，快速搜索 documentElement 让我找到了这个答案：

"documentElement returns 作为文档根元素的元素（例如，HTML 文档的元素）"

然后，我意识到也许这就是问题所在，而且确实如此。我将 rightSide 分配给 h，这就是所需的全部内容。

let h = rightSide;

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

div 使用 javascript 的滚动百分比

Scroll percentage for a div using javascript

html

javascript

scroll

scrollbar

percentage