Backface-visibility

Оформление списков в CSS

Для оформления списков используются следующие свойства:

list-style-type

Возможные значения:

• (отмена маркера или нумерации)

Пример:

ul.none{
	list-style-type none;
}
ul.disc{
	list-style-type disc;
}
...
ol.decimal{
	list-style-type decimal;
}
ol.decimal-leading-zero{
	list-style-type decimal-leading-zero;
}

Результат:

• none
• none

• disc
• disc

• circle
• circle

• square
• square

1. decimal
2. decimal

1. decimal-leading-zero
2. decimal-leading-zero

1. armenian
2. armenian

1. georgian
2. georgian

1. lower-alpha
2. lower-alpha

1. upper-alpha
2. upper-alpha

1. lower-greek
2. lower-greek

1. lower-latin
2. lower-latin

1. upper-latin
2. upper-latin

1. lower-roman
2. lower-roman

1. upper-roman
2. upper-roman

list-style-image

Возможные значения:

url(‘путь к файлу’) (установка своего изображения)

Пример:

ul{
  list-style-imageurl('1.png');
}

Результат:

1. пункт 1
2. пункт 1

list-style-position (положение маркера или номера)

Возможные значения:

• (Маркер является частью текстового блока и отображается в элементе списка)
• (Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока)

Пример:

ul.inside{
  list-style-positioninside;
}
ul.outside{
  list-style-positionoutside;
}

Результат:

inside:

• пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
• пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

outside:

• пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1 пункт 1
• пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2 пункт 2

Задание: Создать маркированный список, вместо маркеров установить изображение.

Примерный результат:

Переполнение текста CSS

Свойство CSS text overflow используется для управления отображением на странице встроенного содержимого, которое выходит за пределы его блочного контейнера.

Чтобы использовать свойство переполнения текста CSS, элемент контейнера блока должен быть определен свойством переполнения со значением, отличным от «visible». Чаще всего это определяется как «переполнение: скрыто». Кроме того, он должен быть определен свойством white-space и иметь значение «nowrap». В противном случае встроенное содержимое будет перенесено на следующую строку вместо отсечения.

Есть два значения свойства CSS text overflow. Давайте посмотрим на них ниже.

Зажим переполнения CSS

Установка для свойства переполнения текста CSS значения «clip» обрезает встроенное содержимое, которое выходит за пределы его блочного элемента контейнера на краю заполнения. Таким образом, посетители не смогут видеть контент за краем, где он обрезан.

Это почти идентично «скрытому» значению свойства переполнения CSS. Разница в том, что в клипе запрещена прокрутка любого вида, в том числе программная. Это означает, что поле элемента не является контейнером прокрутки.

Давайте посмотрим на пример ниже.

Вот CSS:

Вот HTML:

Вот результат:

Эллипсис переполнения CSS

У вас есть возможность установить свойство переполнения текста CSS на «многоточие» по желанию. Это приведет к сокращению встроенного содержимого, которое выходит за пределы его элемента контейнера блока по краю заполнения – и немного больше, чтобы соответствовать многоточию. Это значение также запрещает любую прокрутку, включая программную прокрутку, которая сообщает браузеру, что поле элемента не является контейнером прокрутки. Таким образом, посетители не смогут видеть контент за краем, где он обрезан.

Вот пример.

Вот CSS:

Вот HTML:

Вот результат:

Свойство overflow

Свойство  позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – , что означает — «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить . Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.

Удалите часть содержимого из поля ниже

Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется

В приведённом выше примере нам нужно прокручивать содержимое только по оси , однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство (en-US), которое позволяет прокручивать содержимое только по оси .

Вы также можете установить прокрутку по оси x с помощью (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства или . Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со , вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство , передав два значения. Первое значение будет относиться к , а второе — к . Если передать одно значение, то и получат одинаковые значения. Например, устанавливает в и в .

Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте . Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.

В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.

Как скрыть навигационную панель при прокрутке вниз

Шаг 1) Добавить HTML:

Create a navigation bar:

<div id=»navbar»>  <a href=»#home»>Главная</a>  <a href=»#news»>Новости</a>  <a href=»#contact»>Контакт</a></div>

Шаг 2) Добавить CSS:

Стиль панели навигации:

#navbar {  background-color: #333; /* Черный цвет фона */  position: fixed; /* Сделайте его липким/фиксированным */  top: 0; /* Оставайтесь на вершине */  width: 100%; /* Полная ширина */  transition: top 0.3s; /* Эффект перехода при скольжении вниз (и вверх) */}/* Стиль ссылок навигационной панели */#navbar a {  float: left;  display: block;  color: white;  text-align: center;  padding: 15px;  text-decoration: none;}#navbar a:hover {  background-color: #ddd;  color: black;}

Шаг 3) Добавить JavaScript:

/* Когда пользователь прокручивает вниз, скрыть навигационную панель. Когда пользователь прокручивает вверх, показать навигационную панель */var prevScrollpos = window.pageYOffset;window.onscroll = function() {  var currentScrollPos = window.pageYOffset;  if (prevScrollpos > currentScrollPos) {    document.getElementById(«navbar»).style.top = «0»;  } else {    document.getElementById(«navbar»).style.top = «-50px»;  }  prevScrollpos = currentScrollPos;}

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Fallback FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens

image-rendering
@import
isolation

justify-content

@keyframes

left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position

quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Способ #2. alpha-канал

Свойство влияет на элемент целиком, но вы можете также изменять видимость отдельных свойств: цвета (), фона () или рамки (). Чтобы скрыть их, используйте цвет в формате rgba (или hsla) и установите значение альфа-канала равным нулю, например, .

See the Pen hide with color alpha by SitePoint (@SitePoint) on CodePen.

Каждое свойство можно анимировать отдельно для создания интересных эффектов.

Эту технику нельзя применить к фоновым изображения (кроме тех, которые созданы с помощью CSS-градиентов).

Способы управления альфа-каналом:

• Ключевое слово . Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
• : красный, зеленый, синий и альфа-канал.
• : оттенок, насыщенность, светлота и альфа-канал.
• HEX-формат: или

Очистка Float

Как ни странно, одним из наиболее популярных способов использования является очистка свойства .

Проблема встречается в следующем: когда вы помещаете в элемент дочерний элемент с установленным свойством (плавающий), то родительский элемент не растягивается, чтобы охватить дочерний элемент, а сворачивается, не учитывая его. Это бывает проблемой, например, когда у родительского элемента задан фон или рамка.

На примере это наглядно видно. Внутри родительского элемента (в синей рамке) помещен элемент с текстом и установленным свойством . Родительский элемент при этом свернулся.

See the Pen
overflow float by Андрей (@adlibi)
on CodePen.

Элемент с установленным свойством переполнением (любое значение, кроме ) будет расширяться настолько, насколько необходимо, чтобы охватить все дочерние элементы внутри его, которые являются плавающими. Ниже тот же пример, но с установленным для родителя свойством :

See the Pen
overflow float 2 by Андрей (@adlibi)
on CodePen.

Добавление полос прокрутки для блоков небольшого размера свойством overflow CSS

Давайте рассмотрим ситуацию, когда у вас есть блок с ограниченной высотой, но в нем нужно поместить контент произвольного размера, и возможно, что данный контент будет намного больше размера блока.

Товаров так много, что они не помещаются на видимую часть страницы, и у посетителя нет возможность нажать на кнопку «Оформить заказ». Это очень не красиво и не удобно.

Выходом из данной ситуации является ограничение максимальной высоты для блока с товарами, и добавление вертикальной полосы прокрутки для него. Для этого мы задаем следующие стили для этого блока:

PHP

#pop-up-products-list {
overflow-y: auto; /*Автоматическое добавление полосы прокрутки* /
max-height: 300px; /*Максимальная высота блока*/
}

Свойство overflow-y CSS — это то же самое свойство overflow, но предназначенное для управления контентом только по вертикали. Есть так же специальное свойство для управления контентом по горизонтали — overflow-x. Они имеют такой же набор значений, как и базовое свойство.

В данном случае мы добавили для overflow-y значение auto, которое добавляет полосы прокрутки по вертикали только при необходимости.

Вот что у нас получится:

Когда в корзине мало товаров, то нет никакой полосы прокрутки, и блок подстраивается по высоте, под количество товаров.

При большом количестве товаров, появляется полоса прокрутки, но при этом блок не превышает максимальной высоты.

overflow

Желаю вам успехов! До встречи в следующих статьях!

С уважением Юлия Гусарь

Способ #6. display

, вероятно, самое популярное свойство для скрытия элементов на странице. Значение none эффективно удаляет блок, как будто его никогда и не существовало в DOM.

See the Pen hide with display: none by SitePoint (@SitePoint) on CodePen.

Однако в большинстве случаев — самый плохой способ спрятать что-то. Это свойство нельзя анимировать, и оно вызывает перерисовку страницы (layout), если только элемент не вырван из общего потока документа () или если не используется новое свойство contain.

Кроме того, свойство display может принимать множество значений (, , , , , …). Если вы сбрасываете его до значения , то вернуть затем правильное отображение может быть затруднительно (может помочь значение unset).

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
object-fit
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

CSS-свойства, определяющие переходы

CSS переходы контролируются свойством . Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

Можно контролировать определённые параметры перехода следующими подсвойствами:

(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS s только анимируют смену свойства

Если вам нужно визуализировать этот цикл, обратите внимание на свойство .)

(en-US)

Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.

Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности.

(en-US)

Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet.

(en-US)

Определяет как много должно пройти времени, перед тем как начнётся переход.

Короткая запись синтаксиса:

Скрытие содержимого с помощью content-visibility: hidden #

Что делать, если вы хотите, чтобы контент не отображался независимо от того, отображается он на экране или нет, используя при этом преимущества кэшированного состояния визуализации? Введите: .

Это свойство дает вам все те же преимущества необработанного содержимого и кэшированного состояния визуализации, что и за пределами экрана. Однако, в отличие от with , он не начинает автоматически отображаться на экране.

Это дает вам больше контроля, позволяя скрыть содержимое элемента, а затем быстро отобразить его.

Сравните его с другими распространенными способами скрытия содержимого элемента:

• : скрывает элемент и разрушает его состояние рендеринга. Это означает, что отображение элемента так же дорого, как отображение нового элемента с тем же содержимым.
• : скрывает элемент и сохраняет его состояние отрисовки. На самом деле это не удаляет элемент из документа, поскольку он (и его поддерево) по-прежнему занимает геометрическое пространство на странице, и на него все еще можно щелкнуть. Он также обновляет состояние рендеринга в любое время, когда это необходимо, даже когда оно скрыто.

, с другой стороны, скрывает элемент, сохраняя его состояние визуализации, поэтому, если есть какие-либо изменения, которые должны произойти, они произойдут только тогда, когда элемент будет показан снова (то есть свойство удаляется).

Некоторые отличные варианты использования – это реализация расширенных виртуальных скроллеров и макет измерения.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapz-index

More Examples

Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);
  if (x.style.visibility === ‘hidden’) {    x.style.visibility = ‘visible’;  } else {    x.style.visibility = ‘hidden’;
  }}

Hide and show an <img> element:

function hideElem() {  document.getElementById(«myImg»).style.visibility = «hidden»;
}function showElem() {  document.getElementById(«myImg»).style.visibility = «visible»;
}

Consider Element as Visible Only When in Active Window Viewport

The interpretation of a «visible» element can also be whether the element is actually inside the current window viewport (the current scrolled region of the document as it fits inside the size of the device) instead of the default document viewport (which means the entire document, including any off-screen unscrolled region).

/*
 * Is element inside the current scrolled region of the document
 * (as it fits inside the size of the device)?
 *
 * @param {HTMLElement} element Element to check visibility for.
 * @param {boolean} detectPartialElem If true, check if any part of the element is visible on the screen.
*/
function inViewport(element, detectPartialElem) {
    const viewport = $(window);
    const vpWidth = viewport.width();
    const vpHeight = viewport.height();
    const vpTop = viewport.scrollTop();
    const vpBottom = vpTop + vpHeight;
    const vpLeft = viewport.scrollLeft();
    const vpRight = vpLeft + vpWidth;
		
    const $element = $(element);
    const detectPartial = !!detectPartialElem; // if null or undefined, default to false

    const elementOffset = $element.offset();
    const elementTopArea = elementOffset.top + (detectPartial ? $element.height() : 0);
    const elementBottomArea = elementOffset.top + (detectPartial ? 0 : $element.height());
    const elementLeftArea = elementOffset.left + (detectPartial ? $element.width() : 0);
    const elementRightArea = elementOffset.left + (detectPartial ? 0 : $element.width());

    return (
        (elementBottomArea = vpTop))
        && ((elementRightArea = vpLeft)
    );
}

Example Usage:

// create dummy content
for (let i = 0; i < 25; i++) {
    $('body').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong class="output"></strong></p>');
}

// on scroll check + output the visibility state of an element
$(window).on('scroll', function() {
    // select the detection type:
    // if true, check if any part of the element is visible on the screen
    // if false, check if the entire element is visible on screen
    const detectPartial = false;

    // loop over each paragraph, and check if it's visible
    $('p').each(function(){
        // output visibility state
        $(this).find('.output').text(inViewport(this, detectPartial) ? 'on-screen' : 'off-screen');
    });
});

By default, elements with are considered hidden and would not be accounted for. Elements that have and/or , however, are considered visible and will be checked. You can also combine the function with if you want to make sure the element is completely visually visible.

A note on accessibility #

One of the features of is that the off-screen content remains available in the document object model and therefore, the accessibility tree (unlike with ). This means, that content can be searched for on the page, and navigated to, without waiting for it to load or sacrificing rendering performance.

The flip-side of this, however, is that elements with style features such as or will also appear in the accessibility tree when off-screen, since the browser will not render these styles until they enter the viewport. To prevent these from being visible in the accessibility tree, potentially causing clutter, be sure to also add .

Caution: In Chromium 85-89, off-screen children within were marked as invisible. In particular, headings and landmark roles were not exposed to accessibility tools. In Chromium 90 this was updated so that they are exposed.

Check CSS Properties That Affect Element Visibility

CSS Property:

// checking display property value to determine visibility
($(element).css('display') !== 'none'); // is visible?
($(element).css('display') === 'none'); // is hidden?

// checking visibility property value to determine visibility
($(element).css('visibility') !== 'hidden'); // is visible?
($(element).css('visibility') === 'hidden'); // is hidden?

// checking opacity property value to determine visibility
($(element).css('opacity') !== 0); // is visible?
($(element).css('opacity') === 0); // is hidden?

By combining the above three checks, we can create a function to check for visibility of an element like so:

// check if visible
function isVisible(element) {
    const $element = $(element);
    return (
        $element.css('display') !== 'none'
        && $element.css('visibility') !== 'hidden'
        && $element.css('opacity') !== 0
    );
}