super-dog-human/requestAnimationFrame_with_scroll-behavior_smooth.md

## requestAnimationFrame_with_scroll-behavior_smooth.md

      
    Raw
  

              requestAnimationFrame_with_scroll-behavior_smooth.md
            
          
    In Chrome 87, scrolling with "scroll-behavior: smooth" is not working from requestAnimationFrame.
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 is working even 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);
}