Привет, друзья. Сегодня поговорим о плавной прокрутке сайта. То есть не о , при нажатии на кнопку или ссылку, а о плавной прокрутке при использовании колесика или ползунка.
Совсем коротенькая заметка, просто пришлось реализовать на одном из сайтов, и решил написать об этом в блог, пока готовлю более серьезную статью (виджет скидок), по просьбе одного из читателей. Артем, привет тебе. Я не забыл!
Конечно, многие пользуются браузерами, у которых и так настроена плавная прокрутка, многие используют специальное расширение для браузера, но не все. Давайте же добьемся плавности на большинстве устройств, с которых будут посещать ваш сайт.
Плагин для плавной прокрутки сайтаДля решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin , так как у него очень много возможностей:
- Вертикальная и / или горизонтальная полоса прокрутки.
- Настраиваемый импульс прокрутки.
- Плавная прокрутка колесиком мыши.
- Плавная прокрутка за ползунок.
- Поддержка клавиатуры и плавная прокрутка стрелочками или PgUp/PgDn.
- Поддержка сенсорных экранов.
- Готовые к использованию темы.
- Ручная настройка с помощью CSS.
- Разные варианты отображения ползунка.
- Возможность добавить плавный скролл различным элементам на странице, у которых он присутствует.
Конечно, для многих этот функционал может быть избыточным. Если вы просто хотите сгладить прокрутку колесиком, то в конце разберем совсем простое решение для этих целей.
«Стоп, плавный scroll в различных блоках это хорошо, но где же сама плавная прокрутка сайта из-за который мы пришли?» — скажете вы. Спокойствие. Сейчас мы этим займемся.
Подключения плагинаТак как выбранное решение — это jQuery плагин, то первым делом и подключим к сайту сам jQuery, если он у вас не подключен.
Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.
- jquery.mCustomScrollbar.concat.min.js
- jquery.mCustomScrollbar.min.css
Получится такая структура:
Плавный скролл сайта
Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.
После того как все подключили, нужно инициализировать скрипт:
(function ($) { $(window).on("load", function () { $("body").mCustomScrollbar({ theme: "dark-thin" }); }); })(jQuery);
И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:
Body, html { height: 100%; overflow: hidden; }
Это позволит убрать стандартную полосу прокрутки браузера и задать высоту, понятную скрипту. Не бойтесь, если подключаете к уже готовому сайту. В 99% случаев это никак не повлияет на вашу разметку.
Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:
$(function() { jQuery.scrollSpeed(100, 800, "easeOutCubic"); })
Где первое число — это шаг прокрутки, второе число — это скорость, а третье — тип анимации.
На этом — все. Всем — пока.
Когда-то, очень давно, я уже писал на эту тему, но то было коротко и вскользь. Сегодня хочу подробнее рассказать Вам, что такое по-настоящему плавная прокрутка страницы в браузерах .
Речь ниже пойдёт о специальном расширении для обозревателей Интернета Mozilla Firefox и Google Chrome, которое повысит комфорт Вашего серфинга по Сети. Конечно же, оно будет работать и во всех модификациях (клонах) вышеуказанных браузеров.
Большинство пользователей даже не задумываются о такой мелочи, как качество прокрутки страниц сайтов. Максимум, некоторые «продвинутые» люди находят в настройках своего обозревателя специальный пункт и устанавливая галочку, умывают руки — всё, никаких настроек…
Конечно, это лучше, чем стандартный дёрганный скроллинг, но Уважаемые — кроме Вас самих никто не позаботится о Вашем максимальном комфорте.
Сегодня я открою Вам «тайну» — стандартную плавную прокрутку страниц можно сильно улучшить.
Настоящая плавная прокрутка страницыНе бойтесь, ничего страшного и сложного в специальных расширениях нет — Вы легко станете властелином плавной прокрутки страницы.
Yet Another Smooth Scrolling для Mozilla FirefoxС этим расширением Ваша плавная прокрутка страниц станет мягкой и приятной, она сможет ускоряться (замедляться) по мере интенсивности вращения колёсика компьютерной мыши.
Полезная дополнительная информация на сайте:
Установить расширение Yet Another Smooth Scrolling можно из официального магазина дополнений Mozilla Firefox (потребуется перезагрузка браузера).
После этого заходим в его настройки…
…и начинаем колдовать двигая ползунки…
Какие-то конкретные цифры называть не буду — у каждого свои вкусы и предпочтения. Методом научного тыка Вы должны сами настроить удобную именно Вам прокрутку страницы.
Не забывайте жать «Применить». Всё на русском языке и при наведении курсора мышки на ползунок — появляется подсказка…
Ещё полезная дополнительная информация на сайте:
Пройдитесь по всем вкладкам расширения — там много полезного…
Если раздражает подпрыгивание на границе — отключите его. Попробуйте сменить алгоритм плавности. В пункте «BlackList» можно указать сайты, на которых это расширение не будет работать — очень удобно и практично.
Немного терпения (усидчивости) и Вы не узнаете свой браузер — настолько приятней станет в нём просматривать страницы Интернета.
Chromium Wheel Smooth Scroller для Google ChromeChromium Wheel Smooth Scroller — это абсолютно идентичное расширение для браузера Google Chrome. Описать его подробно я не смогу (у меня не установлен этот браузер сейчас), но там всё понятно и без описания.
Компенсирую этот прокол видеороликом с подробной инструкцией по настройке Chromium Wheel Smooth Scroller от некоего Виктора Томилина — Витя, человеческое спасибо Вам от всех пользователей…
Ещё, для Google Chrome, есть расширение SmoothScroll — оно тоже очень популярно среди пользователей этого браузера, но в его настройках (как мне кажется) можно сломать голову.
В заключении статьи, хочу напомнить Вам, что каждое расширение утяжеляет и замедляет браузер . Если у Вас мощный и быстрый компьютер — Вам ничего не страшно. Но если слабенький — три раза подумайте перед увеличением их числа в обозревателе.
Как сделать прокрутку плавной?
Ответ мастера:
Иногда случается, что информация, помещенная в документе, либо на интернет-сайте, полностью не помещается на экране. Для того чтобы начать просматривать следующую часть текста, нужно прокручивать страницу вниз. Применение эффектов при прокрутке может быть разным, а самое главное - пользователь самостоятельно может настроить их под себя. В частности, для плавной прокрутки следует выполнить несколько действий.
Для начала запускаем браузер. Теперь нам нужно вызвать команду, которая размещена в верхней строке его меню. Если строку меню не видно, значит, отключена функция по ее отображению. Кликнем правой кнопкой мышки на панели браузера, выпадет окно, в котором нужно поставить метку рядом с первой строкой «Панель меню».
Во вкладке «Инструменты» выбираем пункт «Настройки», в результате появится диалоговое окно. Переходим в нем к вкладке «Дополнительно». Здесь будут подразделы, нам нужна вкладка «Общие». Теперь в «Просмотре сайтов» поставим метку в поле рядом со строкой «Использовать плавную прокрутку». Нажимаем «ОК», теперь примененные настройки вступят в силу.
Отключать эту опцию нужно этим же способом – просто снимаем метку с указанного поля и подтверждаем новые настройки. Основной частью пользователей используется для этих целей (прокрутки) колесо мышки. Выполнить настройки, которые отвечают за его работу, находим в «Свойства: Мышь».
Для вызова окна свойств мышки заходим в меню «Пуск». Там выбираем «Панель управления». Находим «Принтеры и другое оборудование», где нужно кликнуть по ярлыку «Мышь». Если на компьютере в данный момент у «Панели управления» классический вид, то кликнем по ярлыку мыши сразу – так откроется нужное окно.
Перейдем к вкладке «Колесико». Тут можно задавать число строк прокручивания страницы при пользовании колесиком мышки. Чтобы это сделать, зайдем в раздел «Прокрутка», там укажем требуемое количество строк при помощи кнопок, либо введем значение с помощью клавиш на клавиатуре. Если необходимость в просматривании текста построчно отсутствует, установим метку рядом со строкой «на один экран». Нажмем кнопку «Применить» и закроем окно свойств.
Инструкция
Прокрутка – настраиваемый параметр. Основные настройки задаются через компонент «Мышь», они действуют для всех приложений, а способ прокрутки можно задать и отменить с помощью браузера. Последние настройки будут действовать при работе в сети интернет.
Чтобы отключить плавную прокрутку при просмотре интернет-ресурсов, запустите браузер и выберите в меню «Инструменты» пункт «Настройки». Для Internet Explorer – меню «Сервис», пункт «Свойства обозревателя». Если меню не отображается, кликните по верхней или нижней панели в окне браузера и отметьте маркером в контекстном меню пункт «Панель меню» или «Строка меню».
После того, как откроется окно «Настройки», перейдите в нем на вкладку «Дополнительные» и сделайте активным раздел «Общие». В группе «Просмотр сайтов» снимите маркер с поля «Использовать плавную прокрутку» и нажмите на кнопку ОК.
Для отключения автоматической прокрутки снимите маркер с поля «Использовать автоматическую прокрутку». Для Internet Explorer – передвигайтесь по списку доступных настроек, используя полосу прокрутки, пока не найдете нужные пункты.
Для настройки общих параметров прокрутки обратитесь к компоненту «Мышь». Для этого вызовите «Панель управления» через меню «Пуск». В категории «Принтеры и другое оборудование» кликните по значку «Мышь».
В открывшемся окне «Свойства: Мышь» перейдите на вкладку «Колесико» и настройте прокрутку в соответствии со своими требованиями. Маркер, установленный в поле «Экран» будет сдвигать изображение на мониторе на расстояние, равное высоте экрана.
Если для вас этот параметр слишком велик, установите маркер в поле «На указанное количество строк» и введите нужное значение с помощью клавиатуры или кнопок со стрелками. Значение «ноль» установить нельзя. Примените новые настройки и закройте окно.
Источники:
- плавная вертикальная прокрутка
Полоса прокрутки стандартно присутствует почти на всех интернет-сайтах, позволяя проматывать вниз или вверх страницу для удобства ознакомления с информацией, размещенной на ней. В некоторых случаях дизайн сайта требует от разработчика удаления полосы прокрутки со страницы, так как она не подходит к оформлению страницы или к типу размещенного контента. Убирайте с сайта полосу прокрутки только тогда, когда это действительно необходимо, чтобы не вызвать чувство дискомфорта у читателей и посетителей страницы.
Инструкция
Если вы хотите на полосу прокрутки во фреймах , используйте параметры scrolling=yes или scrolling=no, включающие и выключающие прокрутку. Чтобы прокрутку в фрейме, введите следующий код :
Немного сложнее будет убрать полосу прокрутки из нового окна – для этого вам потребуются базовые знания языка JavaScript. В данном случае, чтобы убрать полосу прокрутки, используйте метод window.open и параметр scrollbar=0. Этот параметр удаляет все полосы прокрутки на странице – как горизонтальные, так и вертикальные. Чтобы убрать прокрутку в новом окне, вставьте в код страницы следующие строки, чтобы лишить страницу элементов навигации:window.open("tips.html", "TIP", "width=400, height=300, status=0, menubar=0, location=0, resizable=0, directories=0, toolbar=0, scrollbar=0");
Для браузеров Netscape, Mozilla и Internet Explorer подойдет способ, основывающийся на параметре overflow, который позволит, изменяя стиль, убирать прокрутку со страницы. Примените к тегу BODY параметр overflow, дополнив его значением hidden, и сохраните результат - скроллбар со страницы исчезнет:
BODY {overflow: hidden}
:
Полосы прокрутки предназначены для изменения позиционирования отображаемого в окне приложения содержимого, чаще всего страницы документа. По умолчанию они появляются автоматически в тех случаях, когда ширина или высота окна недостаточны для отображения открытой страницы полностью. Следовательно, чтобы избавиться от горизонтальной полосы прокрутки, надо изменить ширину либо страницы, либо окна приложения, в котором она открыта.
Инструкция
Уменьшите масштаб отображения страницы - это самый простой способ убрать горизонтальную полосу прокрутки при просмотре страницы. В любом браузере это можно сделать, покрутив колесико мыши в направлении на себя, удерживая при этом нажатой клавишу ctrl. Во многих текстовых редакторах (например, Microsoft Word) управление масштабами страницы тоже поддерживается. В браузерах вместо мыши можно использовать и клавишу со знаком минуса. Каждое нажатие или поворот колесика на одно деление будет уменьшать масштаб на 10%, пока горизонтальный размер не станет достаточным для отображения страницы без горизонтальной полосы прокрутки.
Используйте возможности браузера вмешиваться в исходный код веб-страницы и изменять заданные в нем стили отображения для приведения их в соответствие с шириной окна - некоторые веб-обозреватели имеют такую опцию. Например, в браузере Opera для этого достаточно щелкнуть по пиктограмме «Подогнать по ширине» и горизонтальная полоса прокрутки исчезнет, а колонки просматриваемой страницы поменяют свои размеры. Если возникнет необходимость вновь вернуться к заданной создателем разметке страницы - щелкните эту пиктограмму повторно.
Применяйте при создании веб-страниц свойство overflow-x языка CSS, чтобы принудительно отключить горизонтальную всей страницы или отдельных ее блочных элементов. Это свойство появилось в CSS, начиная с версии 3.0 и поддерживается всеми современными браузерами. Значения, которые ему могут быть присвоены: auto, hidden, scroll, visible. Если это свойство не указано в описаниях стилей, то считается, что оно имеет значение auto, то есть горизонтальная должна появляться тогда, когда содержимое не умещается в ширину элемента. Чтобы запретить прокрутку для абсолютно всех случаев используйте значение hidden. Например:
body {overflow-x: hidden;}
Скролл – это функция отображения прокрутки страницы по мере просмотра информации пользователем. По желанию ее можно убрать, сохранить или настроить соответственно собственным предпочтениям.
Для просмотра страниц в интернете существует опция плавной прокрутки. Она позволяет передвигаться по странице вверх и вниз более гладко и ровно. В одних браузерах эта опция встроенная (как, например, в браузере Mozilla Firefox), для других требуется установить соответствующую утилиту. Если необходимости в данной опции нет, плавную прокрутку можно просто отключить.
Инструкция