javascript - 当行为 :smooth 时，去抖不适用于 js scrollIntoView

Question

lodash 的 debounce 函数在监听 js 原生 element.scrollIntoView 引起的滚动事件时无法正常工作

HTML

<nav>
<button id="btn1" onclick="goTo(1)">1</button>
<button id="btn2" onclick="goTo(2)">2</button>
</nav>
<div id="el1">1</div>
<div id="el2">2</div>

JS

function goTo(x) {
 const elm = document.getElementById(`el${x}`);
  elm.scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
  let func = _.debounce(() => {
    document.documentElement.scrollBy({
      top: -20,
      behavior: "smooth"
  })
}, 500)
  document.addEventListener('scroll', e => {
    func()
  })
}

问题复现: https://jsfiddle.net/do6bqfx7/4/

Answer 1

这与去抖动无关。看，在 func 中调用的 scrollBy 也是一个滚动 - 这就是为什么它通过一次又一次地延迟调用 func 来处理的原因。您真正需要的是使 func 成为(有效的)单次事件处理程序。一种可能的方法 ( demo ):

function goTo(x) {
  const elm = document.getElementById(`el${x}`);
  elm.scrollIntoView({
    behavior: "smooth",
    block: "start"
  });
  let func = _.debounce(() => {
    document.removeEventListener('scroll', func);
    document.documentElement.scrollBy({
      top: -20,
      behavior: "smooth"
    });
  }, 500);
  document.addEventListener('scroll', func);
}