Свойства CSS overflow (hidden, visible, auto, scroll) и его разновидности для отображения контента блочных элементов. Скролл-эффекты
В разных операционных системах по умолчанию разные полосы прокрутки для браузеров. Но к счастью можно задавать свои собственные цвета для данного элемента, чтобы выделить свой сайт среди остальных. Как-то раз я был на одном английском сайте, и мне очень понравилось как гармонируют цвета сайта с цветом полосы прокрутки. Поэтому если вы решили сделать цвет прокрутки нестандартный, то убедитесь что он подходит по цветовой гамме вашему сайту.
В данной статье мы рассмотрим 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
Для данного плагина необходимо фиксированная высота контейнера, потому что полоса прокрутки расположена справа с помощью позиционирования.
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой
В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow .
О полезном свойстве overflow
Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.overflow-x
- отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y
- отвечает за отображением содержания блочного элемента по вертикали.
Код CSS
Prokrutka {
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}
Свойства и значения overflow
visible - отображается все содержание элемента, даже за пределами установленной ширины.hidden - отображается только область внутри элемента, остальное скрыто.
scroll - принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.
Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности
Код CSS
Prokrutka {
width:150px; /* ширина нашего блока */
height:100px; /* высота нашего блока */
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
}
Принудительная установка прокрутки в блоке CSS
Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.Код HTML и CSS
Prokrutka {
height:150px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
}
Пример div блока с прокруткой
Код HTML и CSS
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.
От автора: статья нашего гостя, Питера Бизменса. Питер – front-end разработчик на сайте Audience, где он любит писать стили на SCSS. Сегодня он нам покажет то, что я называю честным CSS трюком. Весь веб имеет вертикальное строение. Вы читаете сайт, как обычную книгу: слева направо, сверху вниз. Но иногда хочется уйти от вертикальности и сделать что-то сумасшедшее: сделать горизонтальный список. Или еще безумнее, горизонтальный сайт!
Было бы неплохо, если бы мы могли делать вот так:
/* ненастоящий код */ div { scroll-direction: horizontal; }
/* ненастоящий код */ div { scroll - direction : horizontal ; |
К сожалению, такого не будет. Такого даже в планах нет в CSS.
Это очень плохо, потому что в компании, в которой я работаю, это бы очень пригодилось. Мы делаем очень много презентаций, а презентация – это довольно горизонтальная штука. Обычно соотношение сторон у слайдов составляет 4:3 или 16:9. Из-за этого у нас возникает постоянная проблема с горизонтальными слайдами и вертикальными веб-технологиями. Под «мы» я имею в виду себя. Но что я люблю, так это трудности.
Другой вариант использования
Мне в голову пришел конкретный способ применения. Идея в том, что покупателям было бы удобно просматривать все товары на одном слайде. Естественно, каталог товаров не уместился бы в одном виде. Поэтому мы решили разбить каталог на три категории, каждая с горизонтальной прокруткой. Таким образом, три самых популярных товара видны в каждой категории, а к менее важным товарам открыт легкий доступ.
Способ без JavaScript
Все мы знаем, что на JS существует масса способ сделать горизонтальную прокрутку. Некоторые примеры есть на CSS-Tricks . Мне стало интересно, можно ли воплотить эту идею на чистом CSS. Решение оказалось очень простым:
создаем контейнер с элементами;
поворачиваем контейнер на 90 градусов против часовой стрелки, чтобы нижняя грань оказалась справа;
поворачиваем элементы внутри контейнера обратно на свое место.
Шаг 1) создаем контейнер
Создайте блок div с множеством дочерних элементов.
В нашем примере прокручиваемый контейнер будет 300px шириной, в нем будет 8 элементов 100х100px. Размеры произвольные, можно задать любые.
< div class = "horizontal-scroll-wrapper squares" > < div > item 1 < / div > < div > item 2 < / div > < div > item 3 < / div > < div > item 4 < / div > < div > item 5 < / div > < div > item 6 < / div > < div > item 7 < / div > < div > item 8 < / div > < / div > |
Высота контейнера станет шириной и наоборот. Ниже «ширина» контейнера будет составлять 300px:
Horizontal-scroll-wrapper { width: 100px; height: 300px; overflow-y: auto; overflow-x: hidden; }
width : 100px ; height : 300px ; overflow - y : auto ; overflow - x : hidden ; |
И дочерние элементы:
Horizontal-scroll-wrapper > div { width: 100px; height: 100px; }
Horizontal - scroll - wrapper > div { width : 100px ; height : 100px ; |
Шаг 2) поворачиваем контейнер
Теперь нужно повернуть контейнер на -90 градусов при помощи CSS свойства transform. Мы получили горизонтальный скроллер.
Horizontal-scroll-wrapper { ... transform: rotate(-90deg); transform-origin: right top; }
Horizontal - scroll - wrapper { . . . transform : rotate (- 90deg ) ; |
Только есть одна маленькая проблема: дочерние элементы повернулись вместе с контейнером.
Шаг 3) возвращаем дочерние элементы обратно на свое место
Так как же вернуть элементы на свое место? Поверните его обратно при помощи CSS свойства transform.
Horizontal-scroll-wrapper > div { ... transform: rotate(90deg); transform-origin: right top; }
Horizontal - scroll - wrapper > div { . . . transform : rotate (90deg ) ; transform - origin : right top ; |
Шаг 4) фиксированное позиционирование
Смотрится все неплохо, но есть пара проблем.
Мы повернули контейнер, а в качестве якоря задали правый верхний угол, из-за этого левая сторона сместилась на ширину контейнера. Если вам сложно представить, просто приложите палец к правому верхнему углу страницы и поверните ее. Выход: нужно повернуть ее обратно с помощью свойства translate.
Уже лучше. Но первого элемента все еще не видно, так как та же проблема наблюдается и с дочерними элементами. Это можно поправить, задав первому дочернему элементу верхний margin со значением его ширины или трансформировав все элементы, как контейнер. Самый простой способ, который я нашел, это добавить верхний padding к контейнеру, равный ширине дочерних элементов, тем самым создав буферную зону для элементов.
Совместимость
Я проверил совместимость на доступных мне устройствах.
Десктоп
Так как стилизация скроллбаров пока что работает только в Webkit/Blink браузерах, в Firefox и IE показывается обычный серый скроллбар. Это можно поправить с помощью JS и прятать их вообще, но это тема для другого урока.
Прокрутка с помощью колеса мыши отлично работает на десктопе. Но у моего ноутбука свое мнение на этот счет. На устройствах с тач скринами и тач падами демо ведет себя так, будто div вообще не поворачивали.
Мобильные устройства
Я был приятно удивлен, когда узнал, что Android понимает, что контейнер был повернут, и позволяет вам скролить с помощью свайпов вправо и влево.
С iOS же наоборот, все не так гладко. Браузер ведет себя так, будто контейнер не поворачивали вовсе. Поэтому для прокрутки нужно использовать свайпы вверх и вниз, что довольно странно. Overflow: hidden не решает проблему.
Заключение
По данным сайта Can I Use трансформации в CSS сейчас поддерживаются у 93%+ пользователей (на момент написания статьи, ноябрь 2016). Тут проблемы возникнуть не должно.
Хотя лучше не используйте этот метод в продуктиве. Я протестировал его на некоторых устройствах, но далеко не на всех и не так тщательно.
Самая большая проблема – сенсорные инпуты, в которых для перехода налево и направо нужно делать свайпы вверх и вниз. В качестве решения можно было бы прописать сообщение на сайте с объяснением, но тогда вам придется положиться на то, что пользователи прочитают его. И даже тогда это будет противоречить здравому смыслу. Другой способ решения – захватывать сенсорные инпуты с помощью JS на устройствах, но тогда лучше вообще все писать на JS и полностью отказаться от нашего CSS хака.
Доброго времени суток, дорогие хабрахабровцы!
Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах 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. Т.к.
Пользовательские полосы прокрутки становятся популярными, и вы, наверняка, сталкивались с веб-сайтами с уникальными полосами прокрутки, что позволяло сайтам выглядеть более стильно.
Существует несколько способов реализации пользовательской полосы прокрутки. В этом уроке мы будем использовать 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; }
После этих манипуляций ползунок выглядит так:
Вот и все, надеюсь, вам понравится!