Vuejs + mCustomScrollBar

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

Об одном из таких плагинов мы и расскажем, называется он CustomScrollbar и используется для вертикальной и горизонтальной прокрутки содержания веб-ресурсов.

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

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

CustomScrollbar — это плагин использующий jQuery UI, и настраиваемый при помощи CSS. Плагин имеет возможность устанавливать как вертикальную, так и горизонтальную прокрутку содержания веб-страницы. А благодаря jQuery mouse-wheel можно использовать поддержку прокрутки контента с помощью колесика мыши, сглаживание перемещения и настроить высоту и ширину полосы прокрутки.

Для работы плагина необходимо разместить в теге «head» сайта, включение файлов jquery.min.js, jquery-ui.min.js, jquery.easing.1.3.js (сглаживание перемещений содержимого), jquery.mousewheel.min.js (для поддержки перемещений колесиком мыши) и jquery.mCustomScrollbar.css, содержащий CSS для контента и панели прокрутки.

После этих манипуляций необходимо добавить в тег «head» разметку для блоков, в которых будет использоваться прокрутка.

С помощью разметки, содержание размещается внутри элемента «div» с классом «content». Кроме того, элемент «div» должен содержать уникальный «id» в каждом блоке, это нужно, чтобы можно было использовать несколько блоков с настраиваемой скроллинг панелью в одном документе.

Для горизонтальной прокрутки функцию mCustomScrollbar необходимо вызывать с параметром horizontalScroll:true. Это необходимо для автоматической установки общей ширины наполнения, без изменений в CSS или сложных вычислений для JavaScript.

Как сделать красивую полосу прокрутки на Вашем сайте?

В завершении, в конце документа, перед закрытием тега body, необходимо включить плагин jquery.mCustomScrollbar.js, а также функцию вызова и конфигурации скролл-панели.

Динамическая загрузка контента

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

Скрытие панелей прокрутки

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

Поддержка мобильных устройств

Одной из ключевых возможностей jQuery CustomScrollbar, является поддержка мобильных сенсорных устройств на операционных системах iOs и Android.Прокрутку можно настроить для каждого блока с помощью параметров:

  • Тип прокрутки («vertical» или «horizontal»)
  • Перемещения со сглаживанием (значение «0» — не используется)
  • Тип сглаживания
  • Дополнительное место снизу (только для вертикальной прокрутки, минимальное значение: «1»)
  • Настройка высоты или ширины скроллинг-панели («auto» или «fixed»)
  • Прокрутка колесиком мыши («yes» или «no»)
  • Прокрутка клавишами («yes» или «no»)
  • Скорость скроллинга (от «1» до «20»)

О недостатках

В jquery.min.js есть ошибка, которая сбрасывает значение анимации до «0» если оно больше, чем 9999 px. Эта ошибка не существенна, но если высота или ширина содержания равна или больше 10000 px, то ошибка вызывает рывки при прокрутке страницы, а это, согласитесь, портит впечатление от общего внешнего вида веб ресурса. Это уже известная ошибка, поэтому будем надеяться, что в следующих версиях библиотеки она будет исправлена. А до тех пор каждый разработчик находит своё, временное решение.

Оригинал: http://css-tricks.com/custom-scrollbars-in-webkit

Перевод: Влад Мержевич

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color, которые применялись к элементам с полосами прокрутки (вроде body), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit.

Как стилизовать через css полосу прокрутки внутри блока?

Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Необходимое

Разные части

Вот псевдоэлементы, отвечающие за разные части полос прокрутки.

CSS

Различные состояния

Это псевдоселекторы, они позволяют точнее выбирать разные части полосы прокрутки, когда они находятся в различных состояниях.

CSS

Я украду целый раздел с поста Дэвида из блога WebKit, потому что он хорошо объясняет каждую часть.

:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.

:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.

:decrement — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека уменьшена в процессе использования (вверх для вертикального скроллбара и влево для горизонтального).

:increment — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека увеличена в процессе использования (вниз для вертикального скроллбара и вправо для горизонтального).

:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.

:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.

:double-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка является частью пары кнопок, которые находятся вместе в конце скроллбара. Для видимой части трека сообщает, что она примыкает к паре кнопок.

:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.

:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.

:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.

:window-inactive — применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с ::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

Теперь всё вместе

Эти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.

Очень простой пример

Чтобы сделать действительно простой пользовательский скроллбар мы добавим это.

И получим следующий результат на простом <div> с переполненным вертикальным текстом.

В диких условиях

Отмечу очень тонкий и симпатичный скроллбар в блоге Тима Ван Дамма Maxvoltar (сайт Тима больше не использует этот дизайн).

Особенно приятно, что скроллбар применяется к элементу body, но полосы прокрутки не прилипают к верхнему, нижнему или правому краю окна браузера, где они обычно находятся. Я сделал тестовую страницу скопировав и вставив код для достижения аналогичного эффекта.

Посмотреть демо

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

Похожие материалы

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

Как изменить полосу прокрутки на сайте (+ 26 готовых тем)

Да и с красивым дизайном сочетаться стандартная панель прокрутки не будет. Самое простое решение данной проблемы — это стилизовать стандартный скролл средствами css3. Ограничение данного способа в том, что он работает только в браузерах использующих webkit

Вот пример HTML кода для работы:

CSS

Рассмотрим подробнее каждый элемент

::-webkit-scrollbar-track {border-radius: 4px;}  — Задает для трэка скругление краев в 4px

::-webkit-scrollbar {width: 6px;} — Ширина скролла 6px

::-webkit-scrollbar-thumb {border-radius: 4px;background: #f0f2f5;} — Задает цвет и радиус скругления в трэка

:hover::-webkit-scrollbar-thumb — При наведении на блок меняет цвет трэка

Результатом данного кода будет такой скроллбар

Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке Много текста в маленьком блоке

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

Существует несколько способов реализации пользовательской полосы прокрутки. В этом уроке мы будем использовать CSS3, что является самым простым способом. Конечно, есть jQuery-плагины, которые могут помочь с настройкой полосы прокрутки, но я не люблю добавлять много JavaScript на свой сайт. Если вы дизайнер, фотограф или просто хотите, чтобы на вашем сайте был крутой скроллбал, воспользуйтесь каким-нибудь jQuery-плагином.

Вы должны знать, что пользовательские полосы прокрутки настраиваются c помощью CSS свойств с префиксом -webkit в браузерах, использующих механизм рендеринга Webkit (и Blink).

Прежде чем начать, давайте рассмотрим из чего состоит скроллбар:

Терминология

Скролбар состоит из семи различных элементов:

Теперь, когда вы знакомы с терминологией, давайте начнем!

Настройка

Создайте файлы index.html и style.css. В index.html поместите следующее:

Теперь займемся style.css

Во-первых, мы устанавливаем для класса .scrollbarwidth, height, background-color, затем устанавливаем чтобы получить вертикальную полосу прокрутки. Мы задали элементу с классом .force-overflow, чтобы появилась полоса прокрутки (т.к.

Прокрутка CSS

мы использовали свойство overflow-y для скролла в классе .scrollbar).

Теперь мы используем ::-webkit-scrollbar для стилизации полосы прокрутки. Он заменит ширину по умолчанию новой шириной, равной и фоном с цветом :

Теперь мы изменим вид ползунка на более привлекательный. Мы используем псевдоэлемент (т. е.

::- webkit-scrollbar-thumb) и устанавливаем цвет ползунка — background-color.

После этих манипуляций ползунок выглядит так:

Мы использовали box-shadow и , чтобы сделать его стильным и добавить контраст между полосой прокрутки и треком.

Заключение

В заключении еще раз повторимся:

  • Стилизованные полосы прокрутки не являются чем-то необычным. Вы найдете их на основных сайтах и блогах, особенно на личных портфолио.
  • Если вам нужна кроссбраузерность, то к вашим услугам тонны jQuery-плагинов, которые могут помочь с настройкой скроллбара.
  • Пользовательские полосы прокрутки отображаются лишь в браузерах, использующих механизм рендеринга Webkit (и Blink), с помощью вендорного префикса .

Вы можете найти полный код этого урока здесь.

Вот и все, надеюсь, вам понравится!

Добавить комментарий

Закрыть меню