Здравствуйте. Давно мучаюсь с проблемой подтормаживания скролла, если на документе висит соответсвующий обработчик. Пробовал при скролле ставить всем элементам pointer-events: none !Important; но этот подход не помогает. В некоторых местах все равно браузер на милисекунды прерывает скролл и продолжает, что вызывает эффект рывкового скролла. Может кто-то знает рецепт, как сгладить onscroll? Спасибо.
vserv: да, фронт. Добавляет нужный класс после x px (if). Какой нафиг реакт, если в данном случае кроме анимации мне ничего не нужно?) Я же не SPA строю)
vserv: дружище, подключать не самый легкий React, еще при том условии, что я на нем кроме обучащих фич ничего не делал, не будет лучшим решением. Ты его правда везде пихаешь?
Не слушай фанатиков Реакта)
Они его даже в текстовый документ пытаются засунуть)
Идеальную прокрутку на 60fps скорее всего не получится сделать, но можно приблизиться к идеалу, задействовав requestAnimationFrame. И еще будет иметь значение, какое именно свойство ты пытаешься анимировать при скролле. Максимальная производительность у opacity, translate, rotate и scale
Worddoc: возможно у тебя в функции есть код медленный. Всякие getElementByID и т.д. должны быть обязательно вынесены за пределы этой функции, чтобы минимизировать обращения к dom. Выложи кусок кода, который выполняется внутри if - посмотрим
vserv: черт, похоже у меня проблемы с пониманием того, что такое анимация. Почему браузер перерисовывает DOM? Я же не затрагиваю css свойства, которые вызывают reflow.
Worddoc: у тебя там ошибки вроде (jquery плохо знаю)
Во первых - body вынеси в переменную и сравнивай в условии эту переменную, а не ищи этот элемент каждый раз в dom.
Во вторых - у тебя есть переменная elem, но далее по коду ты обращаешься к ней через $(elem), а надо просто как elem.
Ну и третье - найди в инете пример использования requestAnimationFrame и перепиши код аналогично.
PS. Раз ты пользуешься jQuery, то возможно более разумным будет использовать уже готовый плагин.
Алексей Струков: Вынес даже $(document), помогло, спасибо. Теперь буду знать. Попробую requestAnimationFrame сейчас. Мог бы посоветовать какую-нибудь годную книгу по рендерингу, анимации и таких вещах?
Worddoc: я таких книг, к сожалению, не встречал. Можешь попробовать почитать статью how browsers work, но там много ненужных обычному фронтендеру технических деталей. Некоторые крупицы информации возможно окажутся полезными. Для качественной анимации тебе надо по любому копать в сторону requestAnimationFrame, так что вбивай в гугл и читай последние туториалы по этой теме (возможно уже есть более продвинутые способы, но там наверняка еще плохая поддержка браузерами)
