javascript - 如何控制滚动而不让它完成滚动动作或触发滚动事件？

Question

我正在使用滚动捕捉动画效果，但与在滚动事件仅在让滚动条后完成时使用滚动条不同，当我使用 JS scroll() 控制它时，它会在每次触发事件时完成滚动动作，这会导致滚动位置为总是在捕捉点，这就是为什么在这个示例代码中滚动按钮在按住时不像滚动条那样工作

const container = document.querySelector('.container')
const child = document.querySelector('.child')
const upBtn = document.querySelector('.up')
const downBtn = document.querySelector('.down')
upBtn.addEventListener('mousedown', movescrollup)
let Interval

function movescrollup() {
  Interval = setInterval(() => {
    container.scroll({
      top: container.scrollTop - 20,
      behavior: 'smooth'
    })
  }, 300)
}
upBtn.addEventListener('mouseup', stopscrollup)

function stopscrollup() {
  clearInterval(Interval);
}

downBtn.addEventListener('mousedown', movescrolldown)

function movescrolldown() {
  Interval = setInterval(() => {
    container.scroll({
      top: container.scrollTop + 20,
      behavior: 'smooth'
    })
  }, 300)
}
downBtn.addEventListener('mouseup', stopscrolldown)

function stopscrolldown() {
  clearInterval(Interval);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  background-color: black;
  height: 200px;
  margin: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behabior: smooth;
  scroll-snap-type: y mandatory;
}

.child {
  background-color: gray;
  border: 4px solid blue;
  min-width: 300px;
  min-height: 150px;
  scroll-snap-align: start;
}

.manual-scroll {
  width: 200px;
  margin: 50px auto;
}

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="manual-scroll">
  <button class="up">Sroll Up</button>
  <button class="down">Sroll Down</button>
</div>