在滚动时调整大小的矩形过渡被切断

Question

我试图在滚动时调整矩形的大小，当用户向下滚动时，矩形会缩小，当他们向上滚动时，矩形会恢复到原始大小。但是，我遇到了一个问题，如果用户滚动太快，矩形没有足够的时间在用户到达页面顶部/底部之前调整其高度（因此不允许 onScroll 函数更改矩形的高度）。矩形的大小调整没有添加过渡时间。

我假设这是因为矩形的高度取自包含一些文本的 div 的高度。文本也会在滚动条上调整大小，并且有 0.4 秒的过渡时间，这可能会延迟矩形。

有没有办法让矩形继续调整大小，即使在用户停止滚动后也是如此？非常感谢您的帮助！

这是我的代码框架：

    window.onscroll = function() {scrollFunction()};
    var width = window.innerWidth;

    // shrink and grow are functions that change the font size of text

    function scrollFunction() {
      document.getElementById("rect").style.height = document.getElementById("menu").offsetHeight + (width / 100) + "px";
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementById("title").style.fontSize = shrink("title");
        document.getElementById("here").style.fontSize = shrink("here");
      } else {
        document.getElementById("title").style.fontSize = grow("title");
        document.getElementById("here").style.fontSize = grow("here");
      }
    }

    #rect {
      width: 100%;
      position: relative;
      height: clamp(40px, 10vw, 130px);
      background: white;
    }

    #background {
      height: 200vh;
    }

    #title {
      transition: 0.4s;
    }

    <div id="background">
      <div id="rect" style="border: 2px solid green">
        <div id="menu">
         <div id="title">title</div>
         <div id="here">here</div>
        </div>
      </div>
     </div>

Answer 1

为您的矩形使用transform: scale(/* Your shrink size goes here, say 0.3 */)。