时间戳

首页 > 解决方案 > 进度条的滚动事件侦听器，用于 div，而不是主体（vanilla js）

javascript - 进度条的滚动事件侦听器，用于 div，而不是主体（vanilla js）

问题描述

我有这个要用于时间线的垂直“进度条”，我无法弄清楚如何使它与 div 的高度而不是 body 相匹配。

我已经尝试了多种我不会发布的东西，以避免让你们中的任何人感到困惑。

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

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);

标签： javascript

解决方案

var divScroll = document.querySelector('.a');
function stretch() {
  var heightOrWidth = divScroll.scrollHeight - divScroll.clientHeight;
  var scrolled = (divScroll.scrollTop / heightOrWidth) * 100;
  document.querySelector(".p_bar").style.width = scrolled + "%";
}
divScroll.addEventListener('scroll', stretch);
.a{
  height:100vh;
  overflow:scroll;
  color:#fff;
}
.content{
  height:300vh;
  width:100%;
  background: #444;
}

.p_bar{
  width:1%;
  height:20px;
  background: dodgerblue;
  position:sticky;
  top:20px;
  border-radius:20px;
  
}
<html>
  <body>
  
    <div class="a">
      <div class="content">
        <h1>please scroll </h1>
        height/width
        
        <div class="p_bar"></div>
      </div>
    </div>
    
  </body>
</html>

如果没有评论，我希望这可以解决您的问题，我将始终尝试解决.tnx ..

推荐阅读