К сожалению, если ваш HTML содержит много элементов и изображений, операция прокрутки становится очень сложной для браузера, поскольку ему необходимо рисовать области и слои, которые были скрыты за пределами области просмотра, поэтому анимация прокрутки может быть не плавной.
Для таких ситуаций я реализую прокрутку, имея прокручиваемый контейнер с моими экранами и просто переводя его вертикально, например:
container.style.transform = `translateY(-${targetScreenTop}px)`
Конечно, чтобы иметь настоящую анимацию, стиль контейнера должен иметь:
container.style.transition = `transform ${duration}s ease`
Или просто добавьте его в свой CSS со всеми префиксами.
Насколько я знаю, в этом сценарии вместо перерисовки DOM при каждом событии прокрутки браузер будет преобразовывать все это в текстуру, а GPU будет делать свое дело красиво и плавно.
