javascript - 将 HTML 元素与 onscroll 链接，onchange 不起作用

Question

我试图让 div .progress 容器在 div #myContact 滚动到 100% 高度时改变它的宽度

我试过将 HTML 元素与 onscroll、onchange 或其他任何东西链接起来，但我似乎不知道什么可行。

    <div onscroll="scrollProgress()" id="containter" class="snap">
        <div class="progress-container"> //this containter needs to change width
          <div class="progress-bar" id="myContact"></div> //when this one reaches 100% height
    </div>

    </div>
    <script src="scroll.js"> </script>

#containter {
  width: 100%;
  height: 3000px; // original setting is 100vh, this value is just for scrolling without me pasting all the other elemnts
  scroll-behavior: smooth;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

.progress-container {
  position: fixed;
  width: 20%;
  height: 100%;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  width: auto;
  background: #000;
  height: 0%;
  max-height: 100%
}

// Scroll function
  function scrollProgress() {
      var elem = document.getElementById('containter');
      var winScroll = elem.scrollTop;
      var height = elem.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myContact").style.height = scrolled + "%";
};
    // Expand function

    /* When 'myContact' reaches 100% height then 'progres-container' expands left, and cover the entire screen*/

  function expandMe() {
    let trigger = document.getElementById('myContact').style.height;
    if (trigger = 100) {
      document.getElementById('progress').style.width = trigger + "%";
    }
  };
/* When 'myContact' reaches 100% height then 'progres-container' expands left,
 and cover the entire screen*/

什么都没发生，我也没有错误。

非常感谢!

Answer 1

这不是像素完美的解决方案，但由于您的代码中有一些错误，事件监听器应该绑定(bind)到 window 对象，然后它会根据您的需要呈现。我为宽度变化样式添加了一些视觉效果。

window.addEventListener('scroll', function () {
      var winScroll = window.pageYOffset;
      var height = document.getElementById('container').scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myContact").style.height = scrolled + "%";
      document.getElementById("myContact").parentElement.style.width =(scrolled >= 100) ? scrolled + "%" : "20%";
});

#container {
  width: 100%;
  height: 3000px;
  scroll-behavior: smooth;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

.progress-container {
  position: fixed;
  background: #0f0;
  width: 20%;
  height: 100%;
  transition: width 1s;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  width: auto;
  background: #f00;
  height: 0%;
  max-height: 100%
}

<div id="container" class="snap">
        <div class="progress-container"> 
          <div class="progress-bar" id="myContact"></div>
    </div>
</div>