.isVisible()

Видимость

Определить, видим ли элемент на веб-странице, отображается или скрыт.

isVisible(element)

Метод .isVisible() позволяет определить, видимый ли элемент или нет. Отображён элемент в документе или скрыт. Возвращает логическое значение true, если содержимое не спрятано, в противном случае вернётся false. В функцию можно передать следующий параметр:

Параметр	Тип	По умолчанию	Описание
`element`	String	`null`	HTML-элемент

Использование isVisible()

<div id="example" class="uk-card uk-card-default uk-card-body">Карточка</div>

const myElement = util.$('#example');

// Виден ли элемент?
if (util.isVisible(myElement)) {
  console.log('Элемент виден (visible)!')
} else {
  console.log('Элемент скрыт (hidden)!')
}

Результат

'Элемент виден (visible)!'

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

Проверка видимости выпадения

Результат: ожидается...

Смотри результат

<p>Результат: <mark id="result">ожидается...</mark></p>

<div class="uk-tile uk-tile-secondary uk-preserve-color uk-padding-large">
	<button class="uk-button uk-button-defauult" type="button">Проверить видимость</button>
	<div id="ex-drop" class="uk-alert-primary" uk-alert uk-drop="offset: 5">Смотри результат</div>
</div>
   
<script>
const myDrop = util.$('#ex-drop');

util.on(myDrop, 'shown', '.uk-drop.uk-open', checkResult);
util.on(myDrop, 'hidden', '.uk-drop:not(.uk-open)', checkResult);

function checkResult(e) {
	if (util.isVisible(e.target)) {
		result.textContent = "Элемент виден!";
	} else {
		result.textContent = "Элемент НЕ виден!";
	}
}
</script>