Как сделать плавный горизонтальный скролл через wheel?

Question

[Jacket]

Есть блок с горизонтальной прокруткой.
Как его плавно прокручивать с помощью колесика мышки?

Пробовал прикрутить deltaY к scrollTo() с behavior: 'smooth', но из-за задержки получается криво. Что я делаю не так?

В гугле либо плагины, либо не плавно.

МБ можно как-то запустить/эмитировать браузерный скролл? Или это вообще через разметку можно сделать?
Хелб.

Answer 1

[profesor08]

По каждому срабатыванию события у тебя вызывается анимация прокрутки. Поэтому и глючит. Меняй положение прокрутки вручную, не прибегая к Element.scrollTo

Comments

[Jacket]

Пробовал прикрутить просто к scrollLeft, но тогда плавность вообще отваливается.

[profesor08]

Jacket, я не говорил что будет легко, тебе придется на основе полученной дельты прокрутки плавно изменять значение для scrollLeft, учитывать продление анимации, смену направление и кучу прочих нюансов.
Вот в помощь простые функции плавного изменения значений, придется разобраться, как это работает и применить к своим данным.
https://gist.github.com/gre/1650294

Анимировать придется в requestAnimationFrame, вовремя запускать, вовремя останавливать.

[Jacket]

profesor08, примерно это я себе и представлял, но надеялся, что есть какой-то простой варик, которого я просто не нашел.

Дичь, конечно: вон тебе браузерные анимации, вон тебе готовый браузерный скролл, но горизонтально скролить мышкой через них нельзя - сиди изобретай свой велосипед либо бери чужой. Мде.

Ладно, спасибо. Понял, принял.

[profesor08]

Jacket, браузерный скролл хорошо работает когда даешь ему конечную позицию, а не вызываешь его десятки раз за секунду.