Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2023, 07:54
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 93

Можно ли реализовать плавный нативный скролл?
Всем привет! Возможно ли средствами js/css как то реализовать плавный скролинг страницы (не скрол до элемента с якорем, а именно всей страницы, обычный скрол сверху вниз). Плагины, реализующие подобное не совсем удобны, они заменяют родной скрол и когда юзер перемещается по странице сверху вниз, для браузера страница всегда остается в позиции top=0;left=0; Соответственно, все прилипающие элементы, кнопки "Вернутся наверх" и в некоторых случаях модальные окна либо не работают, либо ведут себя некорректно. Так же, не срабатывает событие .scroll и ему подобные.
Собственно, вот вопрос))
Заранее благодарен за любую помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2023, 17:42
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

Volonter, если бы ты удосужился почитать хотя-бы как вообще в принципе осуществляется скроллинг, ты бы заметил что у метода scrollTo есть параметр behavior который и отвечает за плавность прокрутки.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2023, 19:05
Аспирант
Отправить личное сообщение для Volonter Посмотреть профиль Найти все сообщения от Volonter
 
Регистрация: 18.01.2011
Сообщений: 93

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
реализовать так же, как на приведенном примере, буду очень благодарен
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2023, 19:26
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно реализовать данный эффект? Kair Элементы интерфейса 8 13.07.2013 11:02
Как можно такое реализовать? Jquery & Ajax _M_ jQuery 5 16.07.2012 13:24
как можно реализовать вот такой эффект меню(http://allure-estetic.ru/)? Reasgo Библиотеки/Тулкиты/Фреймворки 3 09.10.2011 16:46
Как можно реализовать подоьное? 0931454574 Flash 7 02.06.2011 22:18
Определить присутствует ли скролл на iframe sergiyko Общие вопросы Javascript 3 14.03.2011 23:15