scroll-behavior: smoothだとChromeで要素スクロールが動かない

技術系のTIPSをGistに書き溜めてるんだけど、ググラビリティが低すぎる気がするのでこっちにも貼る。

これはoverflowを指定した要素をrequestAnimationFrame経由でスクロールしようとした際、Chromeでは動かなかった時のメモ。

scroll-behavior が smooth だとだめで auto なら動作するので、Chromeのスムーズスクロールと干渉するのかもしれない。FirefoxはどちらでもOKだった。

動作確認用のCodePenはこちら。 https://codepen.io/superdoghuman/pen/ExgzjXP

<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
  
<button id="scrollButton">
  start scrolling
</button>

#parent {
  scroll-behavior: smooth; /* ここをautoにするとChromeでも動く*/
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: gray;
  width: 800px;
  height: 200px;
}

.child {
  background-color: darkgray;
  margin: 20px;
  text-align: center;
  min-width: 300px;
  min-height: 150px;
}

#scrollButton {
  margin-top: 50px;
  width: 150px;
  height:100px;
  font-size: 1rem;
}

const parentElement = document.getElementById("parent");
const scrollFunc = document.getElementById("scrollButton");
scrollFunc.onclick = () => {
  animate();
}

function animate() {
  parentElement.scrollLeft += 10;
  requestAnimationFrame(animate);
}