Как сделать плавную прокрутку на странице?

Question

[DmitryLife]

Добрый день.

Необходимо реализовать плавный скроллинг на странице на подобие данной страницы:
https://getsuperfluid.com/

Подскажите какой-нибудь плагин, либо нативное решение на JS.

Comments

[goodman77707]

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

[Lord_Dantes]

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

[Валентин Бируля]

Безумно крутой сайт ,красавчик

Тебе бы поработать над оптимизацией

Answer 1

[RAX7]

Answer 2

[tvsjke]

https://jsfiddle.net/tvsjke/7tge5kL9/

Answer 3

[Владимир Проскурин]

Все решения будут дико тормозить. Сайт по ссылке тормозит на macbook pro 2018 с i7, во время скролла лишь появляется желание побыстрее закрыть сайт.
Лучше нативного скролла нет ничего, убеждался в этом множество раз. Если нужна плавная прокрутка к нужной позиции, то тоже есть нативные решения: css scroll-behavior или на js параметр behavior у scrollTo

Comments

[Владимир Проскурин]

Пашенька, Не нативный скролл точно тяжелее нативного, а на мобилах очень много пользователей со слабыми устройствами, и там scrollTo внутри raf или же transfrom: translateY будут тормозить. Понятно, что если на странице простые элементы и минимум слушателей обновления скролла, то будет работать не так тормознуто, но хуже чем в нативе.

[Qualiant]

Владимир Проскурин, а у меня не тормозит с десктопа, с куда более слабым процом. Карта: GTX 1660 Ti. 1080p.
Может, проблема в отсталом маке, цена которого на 80% складывается из рекламы и жадности?

[Qualiant]

Пашенька, этот сайт простецким назвать трудно.

[hzzzzl]

Qualiant, у меня на i5-4690 2014 года выпуска тоже без проблем кстати ¯\_(ツ)_/¯

[Владимир Проскурин]

hzzzzl, а что вы называете без проблем? Я стабильные 60fps, там их точно меньше выдает.

Answer 4

[Александр Пешков]

Есть css scroll-behavior smooth