web点击按钮滚动到顶部的功能用了节流后 如果以很快的速度滚动到顶部，按钮居然不消失，有代码,求解决?

Question

假如300毫秒的节流，我滚动到顶部用了4毫秒 就造成按钮不消失

    <!-- scrolltotop开始 -->
    <div id="scrollToTop" style="position: fixed;visibility:hidden;right: 2rem;bottom: 8rem">
      <div
        onclick="window.scrollTo(0, 0)"
        style="cursor:pointer;background-color: white;display: flex;justify-content: center;align-items: center;border: 1px solid #949494;border-radius: 50%;width: 2.4rem;height: 2.4rem;"
      >
        <svg
          style="color: #949494;"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          version="1.1"
          width="32"
          height="32"
          viewBox="0 0 32 32"
        >
          <path d="M16.767 12.809l-0.754-0.754-6.035 6.035 0.754 0.754 5.281-5.281 5.256 5.256 0.754-0.754-3.013-3.013z" fill="currentColor"></path>
        </svg>
      </div>
    </div>
    <script>
      var throttle = function (func, delay) {
          var prev = Date.now();
          return function () {
              var context = this;
              var args = arguments;
              var now = Date.now();
              if (now - prev >= delay) {
                  func.apply(context, args);
                  prev = Date.now();
              }
          }
      }
      window.addEventListener('scroll', throttle(handle, 100));
      function handle() {
          if(window.pageYOffset>300){
              document.querySelector("#scrollToTop").style.visibility='visible'
            // $("#scrollToTop").fadeIn(600)
          }else{
              document.querySelector("#scrollToTop").style.visibility='hidden'
            // $("#scrollToTop").fadeOut(600)
          }
      }
    </script>
    <!-- scrolltotop结束 -->

Answer 1

哪还是用IntersectionObserver

https://developer.mozilla.org/en-US/docs/Web/API/Intersection... 来解决吧，也不要用什么节流函数了

Answer 2

这种场景应该用防抖吧
节流是一次事件触发后，多少时间内不再触发
防抖的效果就是在一定的时间间隔内，多次触发只有最后一次触发产生

本场景下应该是滚动结束后再计算回到顶部按钮是否显示
节流是滚动开始后100ms内不再计算回到顶部按钮是否显示。。。