behavior:smooth 参数在 chrome 的键盘事件中中断 window.scroll

Question

我很紧张，因为出于某种原因，当我将 behavior: smooth 作为参数传递给 window.scroll 时，该函数在 Chrome 中完全停止工作。没有 behavior:smooth 它会按预期滚动。我很确定这是一个 Chrome 错误，但我在其他地方使用 behavior:smooth 没有问题，所以我想知道导致问题的此页面上的配置有什么特别之处。这是设置，希望能让您重现：

我有一个包含多个视口大小的 div 的文档，如下所示：

html:

<body>
    <div class="slide" data-ind="0"></div>
    <div class="slide" data-ind="1"></div>
    <div class="slide" data-ind="2"></div>
</body>

css:

.slide{
  width:100%;
  height:100vh;
  border-bottom:1px solid black;
  box-sizing:border-box;
}

我正在尝试使用事件侦听器在您按下箭头键时滚动到幻灯片，如下所示：

window.addEventListener('keydown',function(){
      if(event.key=='ArrowRight'){
        let el=document.querySelector('.slide[data-ind="1"]');
        let dist=el.offsetTop;
          window.scroll({
            top:dist,
            left:0,
            behavior:'smooth'
          })
      }
    })

更新： 一些更多的测试表明，只有在键盘事件中使用 window.scroll 时才会发生错误。

Answer 1

我可以通过向键盘事件添加 event.preventDefault(); 来解决这个问题。尚不清楚这是否是 intended/standard 行为，因为即使不添加此行，Firefox 也没有此类问题。

behavior:smooth 参数在 chrome 的键盘事件中中断 window.scroll

behavior:smooth param breaks window.scroll in keyboard event in chrome

html

javascript

css

keyboard-events

dom-events