Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Можно ли реализовать плавный нативный скролл? (https://javascript.ru/forum/misc/85334-mozhno-li-realizovat-plavnyjj-nativnyjj-skroll.html)

Volonter 02.07.2023 07:54

Можно ли реализовать плавный нативный скролл?
 
Всем привет! Возможно ли средствами js/css как то реализовать плавный скролинг страницы (не скрол до элемента с якорем, а именно всей страницы, обычный скрол сверху вниз). Плагины, реализующие подобное не совсем удобны, они заменяют родной скрол и когда юзер перемещается по странице сверху вниз, для браузера страница всегда остается в позиции top=0;left=0; Соответственно, все прилипающие элементы, кнопки "Вернутся наверх" и в некоторых случаях модальные окна либо не работают, либо ведут себя некорректно. Так же, не срабатывает событие .scroll и ему подобные.
Собственно, вот вопрос))
Заранее благодарен за любую помощь!

Aetae 02.07.2023 17:42

Volonter, если бы ты удосужился почитать хотя-бы как вообще в принципе осуществляется скроллинг, ты бы заметил что у метода scrollTo есть параметр behavior который и отвечает за плавность прокрутки.

Volonter 02.07.2023 19:05

Aetae,
В том то и дело, что я первым делом это попробовал. Вот таким образом
window.addEventListener('scroll', function() {
    console.log('scrolling')
    document.body.scrollTo({ top:0, behavior: 'smooth' })
});

Пробовал по разному, но ни один вариант не работал от слова совсем.
Вот тут я реализовал то, что мне нужно посредством плагина smooth-scroll )там еще присутствует плагин scroll-trigger но он для другой задачи.
Все хорошо, но например шапка всегда прилипшая сверху получается, так как страница по факту не скролится, а просто контент "уезжает" вверх (transform: translate3d(0px, -3433px, 0px);)
Вот и был вопрос о том, как сделать родной скрол плавным. С behavior: 'smooth' у меня не получилось никак.
Находил еще пару плагинов, которые якобы должны реализовывать то что мне нужно, но они ни один не работали.
Если приведете пример, как с помощью
Цитата:

scrollTo есть параметр behavior
реализовать так же, как на приведенном примере, буду очень благодарен

Aetae 02.07.2023 19:26

Volonter, ты не можешь по событию сколл делать скролл, потому что скролл и скролл одно и то же. Тебе надо цепляться к событию колеса мыши или стрелочек, preventDefault() и уже оттуда скроллить. Ну и хрень с наложением одного на другое простым скроллом не добиться, очевидно, потому что он линеен, в любом случае извращаться с позиционированием придётся.


Часовой пояс GMT +3, время: 06:15.