scrollBy、scroll-snap与scroll-behavior相关Bug排查求助

我尝试将页面的垂直滚动绑定为水平滚动，同时使用scroll-snap和scroll-behavior实现平滑切换上/下一个“页面”，但脚本与样式交互出现异常行为：

• 添加了400ms的超时机制以防止误触双向滚动，预期仅在当前元素完全显示后才允许滚动到下一个元素，但实际交互不符合预期
• 禁用scroll-snap后，scrollBy函数无法正常工作，仅会轻微移动（而非完整的window.innerWidth宽度）

HTML代码 #

<div class="main-nav">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

CSS代码 #

.a { 
  background: red;
  min-width: 100vw; 
  height: 100vh; 
  display: flex; 
  scroll-snap-align: center; 
  scroll-snap-stop: always;
}
.a ~ .a { background: blue;}
.a ~ .a ~ .a { background: red;}
.a ~ .a ~ .a ~ .a { background: blue;}
* { overflow-y: hidden }
.main-nav {
  display: flex;
  flex-direction: row;
  height: 100%;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
  width: inherit;
}

JavaScript代码 #

var waiting

if (waiting == null) {
  waiting = 0      
}

document.querySelector(".main-nav").addEventListener("wheel", (event) => {
  event.preventDefault();                   
  if (waiting === 0) {
    waiting = 1 
    console.log("started wait");
    if (event.deltaY > 0) {
      scrlFF();
      setTimeout(finishedWaiting, 400);
    } else if (event.deltaY < 0) {                         
      scrlFR();
      setTimeout(finishedWaiting, 400);
    } 
  }
});

function finishedWaiting() { 
  console.log("finished wait"); 
  waiting = 0 
}
function scrlFF() { 
  document.querySelector(".main-nav").scrollBy({ left: window.innerWidth, behavior: 'smooth' }); 
}
function scrlFR() { 
  document.querySelector(".main-nav").scrollBy({ left: -window.innerWidth, behavior: 'smooth' }); 
}

内容的提问来源于stack exchange，提问作者Dann