Скроллбар как в mac os
Наверняка вы видели сайты с оригинальными полосами прокрутки. Это достигается с помощью нового CSS scroll свойства webKit-scrollbar . К сожалению, оно работает только в браузерах на движке WebKit . Но поддерживается jQuery почти во всех обозревателях. Давайте выполним стилизацию скроллбара.
Данное свойство поддерживается версиями Google Chrome для настольных компьютеров и мобильных устройств, Apple Safari , Flock , OmniWeb . Даже если вы создаете дизайн только для этих браузеров без использования jQuery , то сможете охватить только 72% пользователей интернета. Но если у вас нет аллергии на программирование, то можете быть уверены, что каждый ваш посетитель увидит красиво стилизованный скроллбар.
Стилизация скролла CSS и JQuery
Полосы прокрутки реализованы там, где длина контента превышает ширину окна контейнера. Благодаря этому вы получаете возможность стилизовать iframe , элементы div и поле ввода текста. В iframe и текстовой области окна браузеры автоматически добавляют полосу прокрутки в нижней части, когда содержимое выходит за пределы видимой области. Тем не менее, в контейнерах необходимо предоставлять дополнительную информацию для браузеров. Установка свойству overflow значения scroll говорит браузерам о том, что нужно выводить полосы прокрутки в случае переполнения окна контентом:
Это код scrolling CSS покажет полосу прокрутки такой (справа)
Использование псевдоэлементов CSS для настройки скроллбара
IE5.5 был первым браузером, поддерживающим основные стили для скроллинга. Используя свойство scrollbar-face-color , можно были изменить цвет полос прокрутки. Хотя это и не добавляло большого разнообразия, но все же лучше, чем стандартная полоса прокрутки в браузере. Поскольку это свойство по-прежнему поддерживается в Internet Explorer , его можно использовать для пользователей, предпочитающих этот браузер.
Для WebKit-браузерах в CSS существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.
::-webkit-scrollbar-thumb – Это ползунок скроллбара ( чем вы держите и прокручиваете страницу ). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:
::-webkit-scrollbar-track – позволяет настроить трек скроллбара ( путь движения ползунка ). Синтаксис псевдоэлемента для CSS scroll :
::-webkit-scrollbar-button – разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов ( или левого и правого для горизонтальных полос прокрутки ):
Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS .
Настройка скроллбара с помощью Jquery
Если вам нравится программирование front-end , вы можете использовать Jquery-плагин JScrollPane . Он довольно прост в использовании. После того, как вы загрузили и подключили соответствующие файлы в заголовке документа, нужно вызвать одну Javascript-функцию для инициализации панели прокрутки. Вы можете легко изменить дизайн полосы прокрутки с помощью CSS или выбрать одну из существующих тем.
С помощью этого плагина вы можете создавать скроллинг для всех типов браузеров. Так что я бы посоветовал вам воспользоваться им, чтобы сэкономить время и охватить сразу все браузеры:
Если вы захотите изменить настройки CSS scroll по умолчанию, предоставленные JScrollPane , нужно редактировать стили соответствующих элементов:
Вывод
Пользовательские скроллбары больше не являются редкостью. Вы найдете их на большинстве сайтов и блогов. А с JScrollPane стало гораздо проще создавать и отображать стилизованные полосы прокрутки во всех браузерах. Надеюсь, этот урок оказался для вас полезным.
Дайте знать, что вы думаете по этой теме в комментариях. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, подписки, дизлайки!
Чтобы изменить скролл в Firefox, используйте следующий код.
Первое значение scrollbar-color изменяет цвет ползунка, второе - цвет скроллбара.
Значения scrollbar-width изменят толщину (ширину - для вертикального скроллбара, высоту - для горизонтального):
- auto - толщина скролла по умолчанию;
- thin - более тонкий вариант скролла;
- none - скрыть скролл.
Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox.
Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла
Какой-то контент. Текст, изображения или что-то ещё.
Стилизация скролла для webkit браузеров
Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.
mCustomScrollbar
Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar .
Сначала скачайте архив и извлеките к себе в проект файлы:
- jquery.mCustomScrollbar.min.css
- jquery.mCustomScrollbar.concat.min.js
- mCSB_buttons.jpg
Затем подключите jQuery и файлы плагина.
Или же можете подключить все файлы через CDN jsdelivr:
Инициализация
Инициализация через JavaScript
Инициализация в HTML
Настройки
Темы mCustomScrollbar
Выбрать подходящую тему можно здесь.
Если же готовых тем недостаточно, то можете проинспектировать нужный элемент скролла и стилизовать как вам это необходимо.
Добавление скролла
Чтобы принудительно добавить скролл для блока, необходимо ограничить его по высоте/ширине и добавить overflow :
- overflow-y: auto; - для создания вертикального скролла (+ max-height);
- overflow-x: auto; - для создания горизонтального скролла (+ max-width).
При создании горизонтального скролла для текстового блока может понадобится добавление следующего css: white-space: nowrap; .
Как скрыть скролл
Скроем скролл, но оставим возможность прокрутки блока.
CSS Scroll Snap
Позволяет прокручивать не попиксельно, а целыми блоками. Базовое использование.
Вторая версия плагина jScrollPane, несомненно, заслуживает отдельной статьи. Вместе с тем мы не стали модернизировать первоначальную статью JScrollPane. Делаем красивый скроллинг, посвященную первой версии плагина, так как в некоторых ситуациях нужен будет именно первый вариант. Подробнее об этом будет ниже, а сейчас — встречайте! Герой дня JScrollPane 2!
На официальной странице плагина можно посмотреть много других примеров.
Что качать?
Быстрый старт
Подключаем библиотеки и не забываем про CSS:
В HTML каким-либо способом выделяем контейнер для скролла (например, присваиваем класс):
В CSS задаем оформление контейнера:
Настраиваем стили из jquery.jscrollpane.css (подробнее об этом немного ниже).
Последний шаг — инициализируем скролл скриптом:
А теперь подробнее
Настройка стилей
jquery.jscrollpane.css содержит стили на все случаи жизни. Привожу только те правила, которые скорее всего нужно будет настраивать:
Настройки
По сравнению с предыдущей версией появилось масса различных настроек инициализации. Целое море! Но не бойся, что бы не утонуть — мы составили табличку:
| Название функции | Описание функции | Тип данных | Значение по-умолчанию |
|---|---|---|---|
| showArrows | Определяет, нужно ли показывать стрелки на полосе прокрутки. | boolean | false |
| maintainPosition | Определяет, должен ли scrollpane сохранять позицию ползунка при переинициализации скрипта. Если нет, то ползунок при переинициализации возвращается в верхнее положение. См. также stickToBottom и stickToRight. | boolean | true |
| stickToBottom | Если maintainPosition=true, а ползунок прокрутки прокручен до низа, то если stickToBottom=true, то при добавлении нового контента ползунок прокрутки так и останется внизу, несмотря на то, что блок растянулся в высоту. | boolean | false |
| stickToRight | Если maintainPosition=true, а ползунок прокрутки прокручен до конца вправо, то если stickToBottom=true, то при добавлении нового контента ползунок прокрутки так и останется справа, несмотря на то, что блок растянулся в ширину. | boolean | false |
| autoReinitialise | Автоматическая переинициализация jScrollPane. Это может помочь с случаях, когда размеры контента в блоке с прокруткой (или окружающих элементов) изменяются. Однако, необходим дополнительный JavaScript с таймером, поэтому эту функцию рекомендуется применять только в случае необходимости. | boolean | false |
| autoReinitialiseDelay | Число в миллисекундах между автоматическими переинициализациями скрипта (если autoReinitialise = true). | int | 500 |
| verticalDragMinHeight | Минимальная высота вертикального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. | int | 0 |
| verticalDragMaxHeight | Максимальная высота вертикального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. | int | 99999 |
| horizontalDragMinWidth | Минимальная ширина горизонтального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. | int | 0 |
| horizontalDragMaxWidth | Максимальная ширина горизонтального ползунка. Вообще размеры ползунка просчитываются автоматически, но в пределах заданного диапазона. | int | 99999 |
| contentWidth | Ширина контента блоке с прокруткой. Значение по умолчанию неопределено, что позволит JScrollPane посчитать ее самому. Однако, в некоторых случаях бывает нужно задать ее принудительно (например, для предотвращения горизонтальной прокрутки). | int | не определена |
| animateScroll | Определяет, следует ли использовать анимацию при вызове ScrollTo или scrollBy. Можно контролировать скорость анимации и ослабление с помощью настроек animateDuration и animateEase, или если нужна более тонкая настройка, то можно переопределить функцию jQuery animate. | boolean | false |
| animateDuration | Длительность анимированного перехода (если он есть, конечно). | int | 300 |
| animateEase | Тип перехода (см. jQuery animateScroll и jQuery easing) | string | linear |
| hijackInternalLinks | Устанавливается в true, если на старнице используются внутренние ссылки для прокрутки ползунка | boolean | false |
| verticalGutter | Расстояние между контентом и вертикальной полосой прокрутки. | int | 4 |
| horizontalGutter | Расстояние между контентом и горизонтальной полосой прокрутки. | int | 4 |
| mouseWheelSpeed | Множитель, определяющий на сколько смещается прокрутка при скроллинге колесиком мыши | int | 10 |
| arrowButtonSpeed | Множитель, определяющий на сколько смещается прокрутка при нажатии на стрелки | int | 10 |
| arrowRepeatFreq | Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата над одной из клавиш со стрелкой. | int | 100 |
| arrowScrollOnHover | Определяет, должен ли прокручиваться ползунок при наведении на клавиши со стрелками. | boolean | false |
| verticalArrowPositions | Где должны появляться вертикальные стрелки относительно вертикального трека. | string (split|before|after|os) | split |
| horizontalArrowPositions | Где должны появляться горизонтальные стрелки относительно горизонтального трека. | string (split|before|after|os) | split |
| enableKeyboardNavigation | Определяет, можно ли использовать стрелки (и другие клавиши) на клавиатуре для навигации в блоке с прокруткой. | boolean | true |
| hideFocus | Скрывает outline при фокусе. Не рекомендуется изменять этот параметр. Можно стилизовать outline с помощью CSS. | boolean | false |
| clickOnTrack | При нажатии на треке ползунок переходит в точку, на которую нажали. | boolean | true |
| trackClickSpeed | Множитель, определяющий на сколько смещается прокрутка когда мышь зажата над треком. | int | 30 |
| trackClickRepeatFreq | Число миллисекунд между повторяющимися событиями прокрутки, когда мышь зажата над треком. | int | 100 |
jScrollPane API
Фактически, это функции, которые служат для управления скроллом.
Для работы с этими функциями нужно получить доступ к переменной jsp:
После того, как это сделано, можно вызывать следующие функции:
- ele — элемент, которое будет анимироваться
- prop — свойство, которое будет анимироваться
- value — значение свойства после анимации
- stepCallback — функция, которую должна выполняться каждый раз при обновлении значения свойства
Примеры
Инициализация с использованием стрелок для прокрутки:
Задаем минимальную и максимальную длину ползунка прокрутки:
Пример вызова API для программной перемотки скроллбара:
Плюсы:
- адекватно работает во всех популярных браузерах;
- позволяет гибко настроить вид и поведение скролла;
Минусы:
- немного великоват (в несжатом виде 44Kb, в сжатом 14.6Kb);
- прокрутка колесиком мыши «не дружит» с горизонтальным скроллом.
Невооруженным глазом видно, что плагин стал гораздо мощнее, по сравнению с первой версией, хотя, конечно за это приходится расплачиваться — размер скрипта вырос вдвое.
Про резиновый ползунок
Update 15.11.2011 by ksu.
В старой версии плагина ползунок прокрутки состоял из трех частей — резиновой середины, верхней и нижней крышки. Каждой части в отдельности можно было задать, например, фоновый рисунок. В итоге получался красивый резиновый ползунок.
Новая версия плагина тоже позволяет это сделать, но решение немного замаскировано. Как и раньше, присутствуют специальные классы jspDragTop и jspDragBottom. Остается в CSS задать ширину, высоту фоны и позиционирование.
Иногда нас тошнит от новых концепций дизайна пользовательского интерфейса. На имя UI-дизайнеров компании удаляют удобные функции, которыми люди пользуются много лет. Полосы прокрутки отображаются вертикально и горизонтально, если видимое содержимое превышает ширину окна дисплея приложения. Когда вы читаете длинный документ или веб-страницу, это помогает узнать, где вы находитесь, и оценить оставшуюся длину содержимого. Для большинства из нас это похоже на просмотр оставшихся страниц при чтении книги. Длинная спинка Apple убрала фиксированные полосы прокрутки и показывает их при перемещении мыши или на основе жестов трекпада. В этой статье мы обсудим, как вернуть полосы прокрутки на Mac навсегда, а также несколько других параметров настройки, которые упростят вам задачу.
Полосы прокрутки в Safari
Связанный: Как показать рабочий стол на Mac?
Вернуть отсутствующие полосы прокрутки на Mac
Если вы не видите полосу прокрутки в Safari, Pages или любом другом приложении, просто переместите мышь или курсор с помощью трекпада. Это сделает полосу прокрутки видимой. Однако это неудобно, так как он может исчезнуть, прежде чем вы успеете перетащить его в нужное положение. Решение простое; вам нужно сделать его видимым постоянно.
Щелкните «Меню Apple» и перейдите в раздел «Системные настройки…».
Откройте системные настройки в Mac
Нажмите на опцию «Общие».
Открыть общие настройки на Mac
У вас будет три варианта в разделе «Показать полосы прокрутки».
Автоматически на основе мыши или трекпада
Это непростой вариант для понимания. Это можно лучше понять с помощью внешней мыши, подключенной к вашему Mac, и без нее. Сначала включите это и откройте любое приложение по умолчанию, например Preview, Safari или Pages, показывающие длинный документ. Вы НЕ увидите полосу прокрутки, если не переместите курсор вверх или вниз с помощью движения трекпада.
Теперь подключите мышь с помощью кабеля или USB и проверьте документ. Вы будете постоянно видеть полосы прокрутки. Полосы можно перемещать с помощью мыши или трекпада, клавиш со стрелками или пробела.
Таким образом, включение автоматической опции будет в основном отображать полосы прокрутки, когда у вас подключена мышь. И переключайте полосу прокрутки в зависимости от движения трекпада, когда у вас нет внешней мыши.
При прокрутке
Эта опция выполняет ту же функцию, что и предыдущая, без внешней мыши. Это означает, что вы увидите полосы прокрутки только при перемещении курсора вверх или вниз с помощью двойного смахивания пальцем.
Всегда
На наш взгляд, это хороший вариант, чтобы вернуть полосу прокрутки обратно навсегда, независимо от того, есть у вас внешняя мышь или нет. Выберите этот вариант, чтобы работать с документами без проблем.
Связанный: Как управлять рабочим столом на Mac?
Движение полосы прокрутки
В большинстве случаев простого включения полосы прокрутки недостаточно. Обычно вы можете ожидать, что контент переместится в положение полосы прокрутки, где вы щелкнули по боковой панели. К сожалению, Mac будет перемещаться страница за страницей независимо от того, где вы нажимаете на боковую панель. Вы можете просто перетащить полосу прокрутки в нужное место. Однако вы также можете настроить полосу прокрутки, щелкнув ее в «Общие настройки» в разделе «Щелкните на полосе прокрутки до».
Использование стрелок и пробела
Вместо полос прокрутки вы также можете использовать клавиши со стрелками для навигации по документам. Это особенно полезно для вертикальной прокрутки.
- Используйте стрелку вверх или вниз, чтобы переместить щелчок мышью, который переместит документ на несколько строк вверх или вниз.
- Нажмите пробел, чтобы быстро перейти на следующую страницу.
Направление прокрутки полос прокрутки в Mac
Еще одним фактором при использовании вертикальной полосы прокрутки с помощью трекпада является направление прокрутки. Для большинства из нас прокрутка должна происходить в направлении, противоположном направлению движения двойным пальцем. Это означает, что, когда вы проводите двойными пальцами вниз, контент перемещается вверх и наоборот. Это называется неестественной прокруткой.
- Перейдите в «Меню Apple> Системные настройки…» и нажмите «Трекпад».
- Щелкните вкладку «Прокрутка и масштабирование».
- Включите или отключите параметр «Направление прокрутки: естественный», чтобы настроить направление прокрутки.
Полосы прокрутки в сторонних приложениях Mac
Все настройки полосы прокрутки, кроме направления, применяются только к приложениям Apple по умолчанию, таким как Pages, Safari, Finder, Preview и т. Д. Это НЕ будет работать для сторонних приложений, таких как Google Chrome.
- Полосы прокрутки всегда видны в большинстве сторонних приложений, независимо от ваших общих настроек.
- Вы можете переместить полосу прокрутки и содержимое в позицию, по которой щелкнули мышью, хотя в настройках вы установили «Перейти на следующую страницу».
На наш взгляд, это идеальные настройки для приложений, чтобы им было удобно пользоваться.
Читайте также: