Question

一旦div .progress滚动达到100％的高度，我试图使div #myContact容器的宽度改变

我尝试将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

这不是完美的像素解决方案，但是由于您的代码中有一些错误，因此应将事件侦听器绑定到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>

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

1 个答案: