Как сделать Javascript плавной горизонтальной прокруткой ⇐ CSS

[Anonymous]

Я пытаюсь заставить свой код плавно прокручивать мой div по горизонтали. В настоящее время он просто переходит на позицию. Может ли кто-нибудь сказать мне, что я делаю неправильно? Я предоставил вам свой код и JSFiddle.
JSFiddle

< div class="snippet-code">

Код: Выделить всё

document.getElementById('scrollLeft').addEventListener('click', () => {
document.getElementsByClassName('flex')[0].scrollTo(0, 0);
});

document.getElementById('scrollRight').addEventListener('click', () => {
let w = document.getElementsByClassName('flex')[0].scrollWidth;
document.getElementsByClassName('flex')[0].scrollTo(w, 0);
});

Код: Выделить всё

html {scroll-behavior: smooth;}
.container {
width: 800px;
margin: auto;
border: 1px solid black;
padding: 20px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 20px;
justify-content: flex-start;
align-items: flex-start;
overflow: auto;
scrollbar-width: none;
}
.flexItem {
height: 100px;
width: 150px;
min-width: 150px;
border-radius: 5px;
border: 1px solid red;
background-color: #d1d1d1;
}

Код: Выделить всё

1
2
3
4
5
6
7
8
9
10


Scroll Left
Scroll Right

В настоящее время переход к началу и концу полосы прокрутки осуществляется правильно, но это не плавное скольжение до конца, это резкий прыжок. Я попробовал добавить в CSS прокрутку-behavior: Smooth, но это ничего не изменило.

Подробнее здесь: https://stackoverflow.com/questions/783 ... rizontally