Javascript 滚动事件监听器，用于进度条、div，而不是正文（vanilla js）

我有一个垂直的进度条，我要用它来做一个时间轴，我不知道如何使它匹配一个div的高度，而不是身体

我已经尝试了很多东西，为了避免你们中的任何一个感到困惑，我不打算发布这些东西

以下是适用于主体高度的代码，我需要有关如何将其转换为元素高度的帮助/提示：

function stretch() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.querySelector(".progress_bar").style.height = scrolled + "%";
}
window.addEventListener('scroll', stretch);

var divScroll=document.querySelector'.a'； 功能拉伸{ var heightOrWidth=divScroll.scrollHeight-divScroll.clientHeight； var scrolled=divScroll.scrollTop/heightOrWidth*100； document.querySelector.p_bar.style.width=滚动+%； } divScroll.addEventListener'scroll'，拉伸； .a{ 高度：100vh； 溢出：滚动； 颜色：fff； } .内容{ 高度：300vh； 宽度：100%； 背景：444人； } p_酒吧{ 宽度：1%； 高度：20px； 背景：道奇蓝； 位置：粘性； 顶部：20px； 边界半径：20px； } 请滚动 高度/宽度

---

好了，终于到了，正如您所看到的，进度条不会开始增加它的宽度，直到用户滚动过红色div，并且在滚动过内容div之后，它会100%夹住wdith att //当用户滚动页面时，执行myFunction window.onscroll=函数{myFunction}； 函数myFunction{ var winScroll=document.body.scrollTop | | document.documentElement.scrollTop； var height=document.documentElement.scrollHeight-document.documentElement.clientHeight； const contentHeight=document.querySelector.content.offsetHeight const contentOffsettop=document.querySelector.content.offsetTop var scrolled=winScroll/height*100； 让滚动条宽度 const diff=winScroll-contentOffsettop

---

如果diff请添加您的标记，我们不知道进度条在项目中的位置。它是该项目的副本，但已更改为垂直。啊，好的，明白您的意思了吗，那么您的问题在于进度条的高度增加了多少？因此，您肯定需要一些关系计算是的，无法计算出如何计算一个div的高度，不管它有多高，当我滚动时，让进度条下降，考虑到div的高度，而不是身体。是的，这正是我需要的。这很好，但我不认为这是他要求的。这看起来很好，但我如何使用身体滚动条滚动，让进度条在div内增加/减少？我需要不希望div具有滚动条。因此，您是要隐藏div的滚动条，还是要打开scrolleventbody@Sadhin检查我的答案，他问什么就做什么for@Sadhin在主体上的scrollevent，这里有一个gif唯一的问题是，它从93%跳到100%ok，将winScroll+100更改为winScroll，现在它工作顺利