Перевод: Влад Мержевич
Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color , которые применялись к элементам с полосами прокрутки (вроде body ), и делать потрясные штуки . IE теперь не тот.
В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar ) и используют «Shadow DOM ». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки , о которых вы могли только мечтать.
Необходимое Разные частиВот псевдоэлементы, отвечающие за разные части полос прокрутки.
::-webkit-scrollbar { /* 1 - скроллбар */ } ::-webkit-scrollbar-button { /* 2 - кнопка */ } ::-webkit-scrollbar-track { /* 3 - трек */ } ::-webkit-scrollbar-track-piece { /* 4 - видимая часть трека */ } ::-webkit-scrollbar-thumb { /* 5 - ползунок */ } ::-webkit-scrollbar-corner { /* 6 - уголок */ } ::-webkit-resizer { /* 7 - изменение размеров */ }
Различные состоянияЭто псевдоселекторы, они позволяют точнее выбирать разные части полосы прокрутки, когда они находятся в различных состояниях.
:horizontal:vertical:decrement:increment:start:end:double-button:single-button:no-button:corner-present:window-inactive
Я украду целый раздел с поста Дэвида из блога WebKit, потому что он хорошо объясняет каждую часть.
:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.
:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.
:decrement — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека уменьшена в процессе использования (вверх для вертикального скроллбара и влево для горизонтального).
:increment — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека увеличена в процессе использования (вниз для вертикального скроллбара и вправо для горизонтального).
:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.
:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.
:double-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка является частью пары кнопок, которые находятся вместе в конце скроллбара. Для видимой части трека сообщает, что она примыкает к паре кнопок.
:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.
:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.
:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.
:window-inactive — применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.
Теперь всё вместеЭти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.
::-webkit-scrollbar-track-piece:start { /* Выделение верхней половины (или левой половины) трека */ } ::-webkit-scrollbar-thumb:window-inactive { /* Выделение ползунка, когда окно браузера не активно */ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /* Выделение нижней или левой кнопки, когда на них наведён курсор мыши */ }
Очень простой примерЧтобы сделать действительно простой пользовательский скроллбар мы добавим это.
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
И получим следующий результат на простом с переполненным вертикальным текстом.
Стандартная полоса прокрутки в принципе ничем не мешает, но тем неимение ее можно немного доработать. тот способ что я покажу может не только изменить прокрутку, но и придать ей определенную анимацию, замедлить скроллинг и тд. Так же данная прокрутка может иметь любой внешний вид, у нее имеется много стилей и при желании сможете все их опробовать, но об этом позже. То что получится в итоге можно посмотреть по ссылке ниже.
Приступим до воплощения такой доработки. Так как наш скрипт полосы прокрутки использует jQuery, нужна эта самая библиотека jQuery. Ее нужно подключить к сайту. Если библиотека была ранее подключена на сайте, то этот шаг можно пропустить, если нет, то нужно ознакомится с статьей . Строка с ссылкой на библиотеку:
Далее вам понадобится подключить сам скрипт. Его вы можете взять из архива который скачаете по ссылке выше. Файл со скриптом называется custom_scrollbar.min.js . В статье что я рекомендовал есть примеры, как подключать файлы со скриптами. делать это следует после библиотеки.
Чтобы запустить наш скрипт и параллельно задать настройки прокрутке, нужно добавить еще один небольшой скрипт:
$(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-3" }); });
В данном примере есть только одна настройка - указана тема оформления dark-3 . Тем у данной прокрутки много. Можете указать любую. Все их можно взять из списка ниже или из файла стилей, об этом позже. В общем, просто копируете название и добавляете в скрипт выше.
- light
- light-2
- dark-2
- light-thick
- dark-thick
- light-thin
- dark-thin
- rounded
- rounded-dark
- rounded-dots
- rounded-dots-dark
- 3d-dark
- 3d-thick
- 3d-thick-dark
- minimal
- minimal-dark
- light-3
- dark-3
- inset
- inset-dark
- inset-2
- inset-2-dark
- inset-3
- inset-3-dark
Помимо тем оформления, у скрипта есть еще много настроек. Тут расскажу еще об одной, которая понадобится многим и чтобы не отвечать каждому в комментариях, напишу здесь.
Есть такой параметр как scrollInertia . Он задает скорость анимации прокрутки. В примере, что был вверху статьи, при прокрутке ощущается задержка, плавность. Это сделано для придания необычности рядовой полосе прокрутки. В примере установлено значение 3000. В итоге, код будет таким:
$(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-3", scrollInertia:3000 }); });
Чтобы все темы оформления и вообще полоса прокрутки отображалась правильно нужно подключать стили CSS. Если вы не особо хотите заморачиваться, то просто подключайте файл стилей, что так же лежит в скачанном вами архиве и называется - custom_scrollbar.css . Если же заморочится, то из него можно взять только основные моменты. Общие стили и стили определенной темы оформления. остальное попросту не подключать, ведь это лишние строки кода и просто так, сайту они не нужны.
Так же у вас на сайте должны будут установлены определенные стили. Чаще всего они и так будут установлены, но вдруг это не так, то добавьте их себе.
Body{ margin: 0; padding: 0; } html, body{ height: 100%; }
Если все сделано правильно и ваша страница на сайте имеет большую высоту, чтобы появилась прокрутка, то все должно работать. Теперь можете применять ее на своих проектах и радовать себя и заказчиков необычным решением.
На этом все, спасибо за внимание. 🙂
Каким боком сегодняшняя хитрость относится к нашему сайту? На первый взгляд, никаким. Но если на вашем Маке в разделе Boot Camp живёт Windows, то вы уже наверняка заметили, что в Microsoft менять направление скроллинга мыши и трекпада не планировали и не собираются. Из-за этого получается, что в Mac OS X контент в окнах будет следовать за движением пальца (т.е. reverse scrolling), а в Windows вы будете двигать ползунок на экране, а сам контент будет ехать в другую сторону.
В общем, если перестроиться с одного подхода к управлению мышью на другой у вас не получается, пора переходить к решительным действиям. Есть два пути (вариант с удалением Windows и её переносом в виртуальную машину рассматривать не будем):
- отключить обратный скроллинг в Lion или Mountain Lion . Это делается в настройках системы, в пультах «Мышь» и «Трекпад» соответственно
- включить обратный скроллинг в Windows . Как ни странно, там для этого предусмотрен параметр в системном реесте, правда, найти его — отдельное приключение
Поскольку лёгких путей мы не ищем, сегодня мы расскажем о второй альтернативе — активации обратного скроллинга в Windows.
Для начала вам нужно будет попасть в например, это можно сделать через Панель управления. В Диспетчере загляните в секцию «Мыши и иные указывающие устройства»:
В списке устройств выберите вашу мышь двойным кликом. Перейдите на вкладку «Сведения», в выпадающем списке вам нужен будет пункт «ИД оборудования»:
Обратите внимание на первую строку, начиная с букв VID (например, VID_203A&PID_FFFC&REV_0100&MI_01). Запомните эту комбинацию.
На клавиатуре нажмите Command+R, в открывашемся окошке введите regedit и нажмите Enter. Откроется редактор реестра Windows. Слева выберите ветку HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\HID . Вы увидите список мышей и трекпадов, обозначенных комбинациями VID, PID и MI. Вам нужно будет опознать здесь настраиваемое устройство:
Внутри устройства вы можете обнаружить ещё несколько папок. В каждой из них нужно зайти внутрь папки Device Parameters и изменить значение параметра FlipFlopWheel с 0 на 1. После перезагрузки в Windows заработает обратный скроллинг.
В Windows 10 значение прокрутки по умолчанию для колеса мыши автоматически устанавливается на 3. Если вы хотите увеличить или тонко настроить скорость прокрутки мыши, чтобы сделать вещи проще для вас, он может быть настроен так, как вам нравится. Давайте посмотрим, как вы можете изменить скорость прокрутки мыши в Windows 10.
Изменение скорости прокрутки мыши
Многие продвинутые Мышки и тачпад имеют специализированные драйверы со многими дополнительными опциями, которые отображаются на отдельных вкладках в окне свойств мыши. Для настройки этих параметров, вам необходимо обратиться к руководству по эксплуатации вашего оборудования. Другие основные характеристики мыши можно настраивать с помощью настройки приложения.
Сначала, нажмите меню Пуск, нажав кнопку Пуск в левом нижнем углу экрана.
Затем нажмите на Параметры , чтобы открыть приложение. Когда приложение настройки появляется, нажмите на устройства .
Выберите Мышь и сенсорная панель панели в меню слева, чтобы открыть окно настройки мыши.
Вы должны видеть ползунок. Вы можете использовать его, чтобы установить, сколько строк колесо прокрутки должны пропустить за один раз для каждого свитков. Просто держите и перетащить ползунок номер, который вы хотите.
По умолчанию, значение ползунка уже установлен на "3". При необходимости вы можете настроить его, чтобы ответить на любой чувствительности от 1 - 100. Если вы хотите, чтобы ввести значение вашего выбора чувствительности колесика колеса открыть ссылку в нижней части страницы, которая гласит: "Дополнительные опции мыши"
Когда диалог мыши всплывает, выбрал вкладку "Колесо" , смежную с параметрами указателей под окне свойств мыши.
В поле, которое отображается, введите значение чувствительности колеса прокрутки какое вы хотите. В том же окне вы найдете опцию, чтобы связать ваш колесо прокрутки на "одной странице за раз".
Для каждой прокрутки вы делаете, колесо будет пропустить целую страницу контента сразу, вместо того, чтобы идти через него построчно. То же самое можно также использовать для настройки параметров для того, что известно как "горизонтальной прокрутки".
Что обычно происходит, когда человек с толстыми пальцами касается полосы прокрутки, пытаясь переместить ее вверх, вниз или поперек. Особого успеха он не добьется, не так ли? Эта проблема беспокоит некоторых людей, использующих Windows 8 или 8.1 на планшетах или ноутбуках с сенсорным экраном.
Полоса прокрутки (или скроллбар) представляет собой вертикальный или горизонтальный элемент интерфейса, который всегда есть там, где пользователь может прокручивать содержимое. Она отображается с крайней стороны экрана и иногда в нижней части экрана. Если вам недостаточно стандартной ширины скроллбара в Windows 8/8.1, вы можете увеличить ее, а я расскажу вам, как это сделать.
Для достижения нашей цели мы будем использовать инструмент «Редактор реестра». Чтобы его запустить, нажмите Win + R на клавиатуре, затем введите команду regedit в строку диалогового окна «Выполнить» и нажмите Enter.
Когда на экране появится окно редактора реестра, перейдите к следующему разделу:
HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics
В правой панели редактора реестра найдите параметр «ScrollHeight» и дважды щелкните по нему левой кнопкой мыши.
На экране у вас появится окно «Изменение строкового параметра». В поле «Значение» введите желаемое значение. В качестве значения по умолчанию для ширины полосы прокрутки указано -225. Чтобы удвоить ширину, введите -500. Для большинства этого должно быть достаточно, но если вам мало, вы можете увеличить ширину полосы еще больше. Для этого введите любое значение до -1500. Помните, чем больше значение, тем шире будет полоса прокрутки.
Теперь закройте окно редактора реестра. Чтобы применить изменения, достаточно выйти и снова войти в свою учетную запись. Как только этот будет сделано, откройте любое окно проводника Windows, чтобы увидеть новую ширину полосы прокрутки.
Это руководство должно решить вашу проблему, поскольку так вам будет значительно проще перемещать скроллбар вверх-вниз или в сторону.
Отличного Вам дня!
