CSS“snap-scroll”干扰 jQuery“.animatescrollLeft”

我有一个 html 和 css 滑块，我正在使用scroll-snap用于手动滚动和用于自动滚动的 jQuery 按钮。然而，当使用scroll-snap-type: x mandatory;, jQueryscrollLeft动画变得极其滞后或动画消失。这种滞后从何而来？有没有仅 jQuery 的解决方案？

去掉 css 滚动捕捉可以解决问题，但是样式对于滑块来说是必需的。

HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div> 
  <div class="box"></div>
</div>
<button id="left">&larr;</button>
<button id="right">&rarr;</button>

CSS

.container {
  max-width: 300px;
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.box {
  min-width: 100%;
  min-height: 250px;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
}
.box:nth-child(1) {background: #f55;}
.box:nth-child(2) {background: #5f5;}
.box:nth-child(3) {background: #5ff;}

jQuery

$("#right, #left").click(function() {
  var dir = this.id=="right" ? '+=' : '-=' ;
  $(".container").stop().animate({scrollLeft: dir+'300'}, 300);
});

这是一个活生生的例子：https://codepen.io/tystrong/pen/rboLYz https://codepen.io/tystrong/pen/rboLYz

我通过禁用scroll-snap-type滚动动画期间的属性。然后在animate()回调我只是重新启用它。

这是我的简化代码：

$arrows.on("click", event => {
  $track.css("scroll-snap-type", "none");

  $track.stop().animate(
    { scrollLeft: left },
    500,
    () => $track.css("scroll-snap-type", "x mandatory")
  );
});