Возможно ли реализовать «нативный» кинетический скроллинг?

Question

[Александр]

Использую на сайте собственный скрипт для кинетического скроллинга, работает вполне хорошо, но всё же когда начинаешь сравнивать с теми же мобильными устройствами или тачпадами на ноутбуке разница видна (хоть она совершенно и не критична). Недавно, играясь с тачпадом на своём surface'е задумался о том как работает кинетический скроллинг впринципе на тачпадах. Как я понимаю (и судя по логам событий) тачпад сам генерирует несколько постепенно угасающих события скролла после того, как ты перестаёшь вести пальцем по тачпаду. И тут я задался вопросом, а нельзя ли искусственно генерировать аналогичные события с помощью javascript, чтобы браузер сам занимался анимированием скроллинга, что естественно будет намного плавнее и скорее всего более ресурсоёмко. Я вот ни разу не специалист по javascript и довольно посредственно представляю как это работает и можно ли имитировать эти события тачпада. Хотелось бы услышать мнение более продвинутых специалистов.

Comments

[Антон]

мое мнение - на телефонах (да и везде) не портить скроллинг, он лагает в большинстве случаев и ломает опыт

[Александр]

Антон: А на мобильных я и не изменяю его. Только для мыши. К тому же мой скрипт работает очень даже удовлетворительно на данный момент и явно не портит восприятие. У меня игровой интерфейс, так что нужды поддерживать совсем древние устройства - нет.

Answer 1

[Vlad Feninets]

вообще оверрайдить поведение скролла это всегда плохо, лучше нативного быть не может, потому что вы не можете отследить все кейсы, как ваш скролл работает на том или ином у-ве, + некоторых людей может раздражать такой UX у скролла.

Ну а вообще, есть уже масса готовых библиотек для кастомного скроллинга. Вы просто подписываетесь на событие "scroll" и переопределяете там scroll position каждый раз. Можно для этого даже какую-то кривульку сделать (cubic-bezier).

Comments

[Александр]

Меня интересует генерация собственных дополнительных событий scroll

[Александр]

LordGuard: + изменять скролл я буду только для мыши, для остальных оставляю по дефолту.

[Vlad Feninets]

LordGuard: ну вот сходу я нагуглил такой вот репозиторий - https://github.com/ariya/kinetic
возможно вы это искали? там есть сразу демки.

[Александр]

Vlad Feninets: я вам про одно, вы мне про другое. Я говорю про конкретный способ реализации кинетического скроллинга. Через ScrollTop я и сам уже давно сделал. Работает прекрасно. Меня же интересует реализация по совершенно другому принципу.

Answer 2

[Алексей Сегодин]

Советую использовать библиотеку TweenMax (или TweenLite) с плагингом Draggable. Помимо всего прочего он также делает то, что вы описали. И делает это хорошо и плавно. Дополнительный плюс в том, что он использует именно нативную прокрутку браузера и анимирует её. Тоесть работает именно событие scroll, а не сдвиг по оси Y или прочие. Из-за чего всё очень быстро и плавно прокручивается на любом устройстве.
В вашем случае нужно повесить анимацию плагина на событие wheel.

P.S. Тот тип скролла который вы описали уже работает на маках (с мышками) на уровне ОС. Их мыши генерируют именно такие угасающие события. Так что эту функцию для OSX, наверное, нужно будет отключить чтобы избежать конфликтов. А может конфликтов и не будет — нужно пробовать.