Привет, друзья. Сегодня поговорим о плавной прокрутке сайта. То есть не о скролле к якорю, при нажатии на кнопку или ссылку, а о плавной прокрутке при использовании колесика или ползунка.
Совсем коротенькая заметка, просто пришлось реализовать на одном из сайтов, и решил написать об этом в блог, пока готовлю более серьезную статью (виджет скидок), по просьбе одного из читателей. Артем, привет тебе. Я не забыл!
Конечно, многие пользуются браузерами, у которых и так настроена плавная прокрутка, многие используют специальное расширение для браузера, но не все. Давайте же добьемся плавности на большинстве устройств, с которых будут посещать ваш сайт.
Плагин для плавной прокрутки сайта
Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin, так как у него очень много возможностей:
- Вертикальная и / или горизонтальная полоса прокрутки.
- Настраиваемый импульс прокрутки.
- Плавная прокрутка колесиком мыши.
- Плавная прокрутка за ползунок.
- Поддержка клавиатуры и плавная прокрутка стрелочками или PgUp/PgDn.
- Поддержка сенсорных экранов.
- Готовые к использованию темы.
- Ручная настройка с помощью CSS.
- Разные варианты отображения ползунка.
- Возможность добавить плавный скролл различным элементам на странице, у которых он присутствует.
Конечно, для многих этот функционал может быть избыточным. Если вы просто хотите сгладить прокрутку колесиком, то в конце разберем совсем простое решение для этих целей.
Итак, самое время посмотреть демку. Автор уже приготовил отличный вариант:
"Стоп, плавный scroll в различных блоках это хорошо, но где же сама плавная прокрутка сайта из-за который мы пришли?" - скажете вы. Спокойствие. Сейчас мы этим займемся.
Подключения плагина
Так как выбранное решение - это jQuery плагин, то первым делом и подключим к сайту сам jQuery, если он у вас не подключен.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.
- jquery.mCustomScrollbar.concat.min.js
- jquery.mCustomScrollbar.min.css
Получится такая структура:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Плавный скролл сайта</title> <meta name="author" content="DimaDV7"> <link rel="stylesheet" href="./css/jquery.mCustomScrollbar.min.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="./js/jquery.mCustomScrollbar.concat.min.js"></script> </body> </html>
Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.
После того как все подключили, нужно инициализировать скрипт:
<script>
(function ($) {
$(window).on("load", function () {
$('body').mCustomScrollbar({
theme: "dark-thin"
});
});
})(jQuery);
</script>
И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:
body, html {
height: 100%;
overflow: hidden;
}
Это позволит убрать стандартную полосу прокрутки браузера и задать высоту, понятную скрипту. Не бойтесь, если подключаете к уже готовому сайту. В 99% случаев это никак не повлияет на вашу разметку.
Обратите внимание, что на этой странице около 50 опций для тонкой настройки плагина. Например, в исходнике я использую следующие:
- theme: - тема для отображения скролла;
- autoHideScrollbar - включение или отключение автоматического скрытия полосы прокрутки при неактивном состоянии;
- autoExpandScrollbar - включение или отключение автоматического расширения полосы прокрутки при перемещении курсора или перетаскивании полосы прокрутки;
- scrollEasing: - тип анимации;
- mouseWheel: { scrollAmount: '300' } - количество пикселей, на которое будет осуществлена прокрутка при кручении колесика мыши
Вот такой интересный плагин для плавной прокрутки сайта и других его элементов, который можно полностью кастомизировать под свой дизайн, писать свои темы и т.д.
Более простое решение для плавной прокрутки, если вам не нужны навороты
Если вам не нужны никакие дополнительные функции, кроме как плавная прокрутка при скролле колесика мыши, то воспользуйтесь плагином jQuery.scrollSpeed
Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:
$(function() {
jQuery.scrollSpeed(100, 800, 'easeOutCubic');
})
Где первое число - это шаг прокрутки, второе число - это скорость, а третье - тип анимации.
На этом - все. Всем - пока.
9 комментариев
не работает в том виде, как получается после установки в соответствии с инструкцией ....
Максим, ничего не понял. Что не работает? В каком виде? Есть же рабочий исходник, скачайте и подстройте под свои нужды. Для этого же я их и выкладываю, чтобы был пример и легче было разобраться.
Всё хорошо работает. Разобрался. Мой фол.
Максим, отлично!
Дмитрий, я вот скачал исходник запустил подстроил под свои нужны но обьекты с position: fixed; перестали быть фиксированными
Марк, здравтвуйте. Не совсем понял, что вы имеете ввиду. Для теста создал строку, дал ей position: fixed; - все ок: https://prnt.sc/1x65xo1
Ничего не слетело. Скорее всего что-то сделали не правильно или ожидаете неправильную логику и поведение, а она такие, как и должны быть.
Марк, Похожая проблема.
Все что было fix работает, но скрипты не чувствуют что совершается прокрутка.
Например фон у фикс. меню сменялся с прозрачного на белый при прокрутке. Но этого не происходит.
Сделал все как надо, теперь мышь в браузере не работала. Приходилось переустанавливать браузер
оно на body никак не поставиться, нужно весь контент тогда оборачивать в div и ему привязывать скролл