С выходом Windows 10 для тачпада ноутбуков добавилась новая функция, которая уже давно есть в OS X- жесты пальцами на тачпаде, в том числе прокрутка двумя пальцами страниц вертикально либо горизонтально. Но есть небольшая неприятность: все привыкли, что при прокрутке вниз содержимое страницы движется вверх и наоборот, а в Windows 10 реализовано совсем непривычно- содержимое страницы движется вслед за прокруткой, к чему довольно трудно привыкнуть. На всех форумах, где я искал решение этой проблемы, согласно инструкциям требуется редактировать реестр, что для многих пользователей может быть затруднительно. Но в большинстве случаев это можно сделать проще.
Нажимаем кнопку Пуск
и выбираем Параметры
, в открывшемся окне выбираем раздел Устройства
(Bluetoth, принтеры, мышь). Если ноутбук оборудован т.н. тачпадом повышенной точности, вы увидите тут же переключатель Изменить направление прокрутки
.
Но у большинства ноутбуков обычные тачпады, в этом случае нажмите на ссылку Дополнительные параметры мыши . Откроется окно Свойств мыши , таким образом вы попадете в окно настроек предоставляемых самим производителем тачпада (чаще всего это Synaptics)
Нажимаем кнопку Параметры , переходим на вкладку Прокрутка
Здесь нужно снять галочки с пунктов Направление переключения или Направление прокрутки (возможны и другие варианты, у разных моделей может быть по разному, но по названию вы поймете назначение) и нажимаем ОК везде. Все, можно пользоваться прокруткой привычным способом.
Каким боком сегодняшняя хитрость относится к нашему сайту? На первый взгляд, никаким. Но если на вашем Маке в разделе 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 заработает обратный скроллинг.
Сегодня поговорим о полосе прокрутки страниц. А точнее про ее внешний вид, который толком не меняется уже несколько десятилетий. И мне, собственно как и вам, она изрядно поднадоела. По этому мы рассмотрим возможность о ее замене на свою.
Данное решение является очень удобным, так, как здесь не задействуются JavaScript . Что в свою очередь убирает нагрузку на сайт. Все работает с помощью стилей и имеет минимум кода.
Установка
Вставляем данный код в Таблицу стилей (CSS)
::-webkit-scrollbar-button {
background-image:url("");
width:5px;
height:0px
}
::-webkit-scrollbar-track {
background-color:#ecedee
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}
::-webkit-scrollbar-thumb:hover{
background-color:#56999f;
}
::-webkit-resizer{
background-image:url("");
background-repeat:no-repeat;
width:4px;
height:0px
}
::-webkit-scrollbar{
width: 4px;
}
Установка на этом завершена. Теперь разберем, какая строка за что отвечает.
Цвет дорожки, по которой двигается бегунок прокрутки.
Меняем ecedee на свой цвет.
::-webkit-scrollbar-track {
background-color:#ecedee
}
Цвет бегунка полосы, а так же его закругление.
Меняем 6dc0c8 на свой цвет.
Меняем значение border-radius для закругления.
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}
Цвет бегунка при наведении на него курсора.
Меняем 56999f на свой цвет.
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}
Основная ширина полосы прокрутки.
Меняем значение width
::-webkit-scrollbar{
width: 4px;
}
Пример
В качестве примера мы сделали прокрутку в таком стиле:
Установите на сайт данный скролл, просто скопировав следующий код:
200?"200px":""+(this.scrollHeight+5)+"px");"> ::-webkit-scrollbar-button {
background-image:url("");
background-repeat:no-repeat;
width:6px;
height:0px
}
::-webkit-scrollbar-track {
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url("https://сайт/_pu/24/59610063.png");
background-position:center;
background-repeat:no-repeat;
}
::-webkit-resizer{
background-image:url("");
background-repeat:no-repeat;
width:7px;
height:0px
}
::-webkit-scrollbar{
width: 11px;
}
Перевод: Влад Мержевич
Вернёмся назад, когда вы могли настроить скроллбары в 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 плагины, позволяющие сделать нестандартную полосу прокрутки в браузере, так как CSS свойства поддерживаются не всеми браузерами.
Приступим к рассмотрению данных плагинов, которые изменяют вид полосы прокрутки в браузере.
1. NiceScroll.js
NiceScroll является jQuery плагином, который позволяет создать полосу прокрутки похожую на iOS.
2. NanoScroll
Данный плагин позволяет создать полосу прокрутки на вашем сайте как в Mac OS X.
3. jQuery custom content scroller
Плагин jQuery для стилизации полосы прокрутки в браузере с помощью CSS.
4. Tiny Scrollbar
Легкий jQuery плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.
5. Scrollbar Visibility
Легкий плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.
6. jScrollPane
С помощью данного плагина также можно делать пользовательские полосы прокрутки, которые работают во всех современных браузерах. Стили можно менять с помощью CSS файла.
7. Scrollbar Paper
С помощью данного плагина нельзя придать стиль полосе прокрутки которая у браузера, но можно задать для содержимого фреймов внутри страницы.
8. jQuery Scrollbars v2
Полностью настраиваемые полосы прокрутки, а также показывает стандартные если Javascript отключен в браузере.
9. Vertical scrollbar
Для данного плагина необходимо фиксированная высота контейнера, потому что полоса прокрутки расположена справа с помощью позиционирования.