Пользовательские полосы прокрутки становятся популярными, и вы, наверняка, сталкивались с веб-сайтами с уникальными полосами прокрутки, что позволяло сайтам выглядеть более стильно.
Существует несколько способов реализации пользовательской полосы прокрутки. В этом уроке мы будем использовать CSS3, что является самым простым способом. Конечно, есть jQuery-плагины, которые могут помочь с настройкой полосы прокрутки, но я не люблю добавлять много JavaScript на свой сайт. Если вы дизайнер, фотограф или просто хотите, чтобы на вашем сайте был крутой скроллбал, воспользуйтесь каким-нибудь jQuery-плагином.
Вы должны знать, что пользовательские полосы прокрутки настраиваются c помощью CSS свойств с префиксом -webkit в браузерах, использующих механизм рендеринга Webkit (и Blink).
Прежде чем начать, давайте рассмотрим из чего состоит скроллбар:
Терминология
Скролбар состоит из семи различных элементов:
::-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 - изменение размеров окна*/ }
Теперь, когда вы знакомы с терминологией, давайте начнем!
Настройка
Создайте файлы index.html и style.css . В index.html поместите следующее:
Теперь займемся style.css
Во-первых, мы устанавливаем для класса .scrollbar width , height , background-color , затем устанавливаем overflow-y: scroll чтобы получить вертикальную полосу прокрутки. Мы задали min-height: 450px элементу с классом .force-overflow , чтобы появилась полоса прокрутки (т.к. мы использовали свойство overflow-y для скролла в классе .scrollbar ).
Scrollbar { background-color: #F5F5F5; float: left; height: 300px; margin-bottom: 25px; margin-left: 22px; margin-top: 40px; width: 65px; overflow-y: scroll; } .force-overflow { min-height: 450px; }
Теперь мы используем ::-webkit-scrollbar для стилизации полосы прокрутки. Он заменит ширину по умолчанию новой шириной, равной 6px и фоном с цветом #F5F5F5:
#style-1::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; }
Теперь мы изменим вид ползунка на более привлекательный. Мы используем псевдоэлемент (т. е. ::- webkit-scrollbar-thumb ) и устанавливаем цвет ползунка - background-color .
#style-1::-webkit-scrollbar-thumb { background-color: #000000; }
После этих манипуляций ползунок выглядит так:
Вот и все, надеюсь, вам понравится!
В разных операционных системах по умолчанию разные полосы прокрутки для браузеров. Но к счастью можно задавать свои собственные цвета для данного элемента, чтобы выделить свой сайт среди остальных. Как-то раз я был на одном английском сайте, и мне очень понравилось как гармонируют цвета сайта с цветом полосы прокрутки. Поэтому если вы решили сделать цвет прокрутки нестандартный, то убедитесь что он подходит по цветовой гамме вашему сайту.
В данной статье мы рассмотрим 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
Для данного плагина необходимо фиксированная высота контейнера, потому что полоса прокрутки расположена справа с помощью позиционирования.
Доброго времени суток, дорогие хабрахабровцы!
Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!
Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.
Свойства
1. -webkit-overflow-scrolling: touchЭто css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.
Ov-scroll{
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}
2. -webkit-text-size-adjust: none
Отключает масштабирование текста в горизонтальной ориентации.
Body{
-webkit-text-size-adjust: none;
}
Пример:
3. -webkit-tap-highlight-color: #ccc
Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.
A, label{
-webkit-tap-highlight-color: transparent;
}
Пример такого выделения:
4. -webkit-appearance: none
Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.
Input, input, textarea{
-webkit-appearance: none;
}
Применяется не только в верстке для Safari.
5. (pointer:coarse)
Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой тач. Таким образом, на тач-устройствах можно отключить лишние анимации, ненужные данным типам устройств.
@media (pointer:coarse){
...
}
Можно использовать не только в верстке для Safari.
Фиксы
1. background-attachment: fixedПроблема: background-attachment: fixed не работает в iOS Safari.
Решение: Фиксировать не фон, а блок или псевдоэлемент.
Body:before {
content: "";
background-image: url(...);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
2. Нежелательный скролл модального окна
Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) - то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.
Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.
Modal{
position: fixed;
z-index: -9;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
pointer-events: none;
}
3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.
Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.
Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js
Nav{
.........
position: absolute;
}
.nav_fix{
position: fixed;
}
@supports ((position:sticky) or (position:-webkit-sticky)){
.nav, .nav_fix{
position: -webkit-sticky;
position: sticky;
}
}
К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.
4. Блок с position: fixed при скролле
Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.
Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:
Решение: Нужно сделать следующий «трюк», используя transform.
Nav{
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: -70px;
padding-bottom: 70px;
transform: translateY(70px);
}
Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.
Выводы
А выводов особо нет, просто пользуйтесь) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!Спасибо за внимание!
Update
В свойствах изменен пункт 5. Т.к.
Коротенькая и совсем несложная глава про цвет полосы прокрутки.
Для того чтобы изменить дизайн полосы прокрутки, раскрасить её на свой лад, необходимо воспользоваться свойствами из семейства scrollbar , присвоив их нужному элементу.
В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки