JS властивість Object.innerHeight

Загальний опис

Властивість Window.innerHeight в JavaScript є ключовою для роботи з графічним інтерфейсом користувача. Вона відображає внутрішню висоту вікна переглядача, включаючи, але не обмежуючись, область відображення веб-сторінки. Значення, яке повертає innerHeight, вимірюється в пікселях і включає висоту області перегляду, але не включає панелі інструментів та прокрутки браузера.

Основна користь використання Window.innerHeight полягає у можливості адаптації веб-дизайну до розмірів вікна користувача, що забезпечує краще візуальне сприйняття веб-сторінок. Це особливо актуально для реалізації відгукового веб-дизайну (responsive web design), де веб-сторінка автоматично налаштовує свій макет залежно від розміру пристрою, на якому вона відображається.

Приклади використання:

Основне використання:

let height = window.innerHeight;
console.log('Висота вікна браузера: ' + height + 'px');

Адаптація веб-дизайну:

window.addEventListener('resize', function() {
  if (window.innerHeight < 500) {
    // Змінити стиль, якщо висота вікна менша за 500 пікселів
    document.body.style.backgroundColor = 'lightblue';
  } else {
    document.body.style.backgroundColor = 'white';
  }
});

Використання у скриптах для прокрутки:

window.addEventListener('scroll', function() {
  if (window.scrollY + window.innerHeight >= document.body.offsetHeight) {
    // Логіка, яка виконується при досягненні нижньої частини сторінки
    console.log('Досягнуто нижньої межі сторінки');
  }
});

Практичне застосування:

Використовується для створення відгукових макетів, які забезпечують користувачам кращий досвід перегляду, незалежно від розміру вікна браузера.
Підтримка скриптів, що реагують на зміну розмірів вікна, дозволяючи забезпечити динамічність та інтерактивність веб-сторінок.
Використання у скриптах для прокрутки сторінки, що забезпечує додаткову інтерактивність та функціональність сайту.

Загалом, властивість Window.innerHeight є важливою для створення інтерактивних та адаптивних веб-інтерфейсів, дозволяючи веб-розробникам забезпечити користувачам кращий досвід використання їх веб-сайтів.

Порада:	Якщо вам потрібно розміщувати елементи відносно висоти вікна браузера, `innerHeight` допоможе вам точно визначити потрібну позицію.
Порада:	Слідкуйте за зміною розміру вікна браузера, використовуючи `innerHeight` разом з обробниками подій, такими як `resize`. Це дозволить вам динамічно адаптувати вміст сторінки під нові розміри.
Порада:	Уникайте використання фіксованих розмірів у CSS, якщо ви плануєте динамічно змінювати стилі елементів на основі `innerHeight`. Замість цього використовуйте відсотки або інші відносні одиниці для гнучкості.
Нотатка:	У мобільних браузерах висота може змінюватися залежно від видимості панелей браузера.
Нотатка:	Значення, що повертає `innerHeight`, може змінюватися при зміні розмірів вікна браузера користувачем.
Нотатка:	Важливо розуміти, що `innerHeight` не включає висоту панелі вкладок, панелі адреси або панелей інструментів браузера.
Порада:	Використовуйте `innerHeight` для створення адаптивного дизайну веб-сторінок. Знаючи висоту вікна браузера, можна краще налаштувати вміст сторінки під різні розміри екрану.

Синтаксис

Window: innerHeight property

Значення

Return

Переглядачі

Переглядач
	1	1	3	9	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

У цьому прикладі користувач може змінювати розмір вікна браузера, а потім натискати на кнопку, щоб побачити оновлену висоту вікна. Це демонструє динамічну роботу властивості Window.innerHeight.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ExrrgVj">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо властивість innerHeight об'єкта Window, щоб динамічно адаптувати висоту певного елементу (adaptiveElement) до висоти вікна браузера. При завантаженні сторінки та зміні розміру вікна браузера, висота елементу оновлюється відповідно до поточного розміру вікна.

// Отримуємо посилання на елемент, який потрібно адаптувати до висоти вікна
var elementToAdapt = document.getElementById('adaptiveElement');

// Функція для адаптації висоти елементу
function adaptElementHeight() {
  var windowHeight = window.innerHeight; // Отримуємо висоту вікна браузера
  elementToAdapt.style.height = windowHeight + 'px'; // Застосовуємо висоту до елементу
}

// Викликаємо функцію при завантаженні та зміні розміру вікна
window.addEventListener('load', adaptElementHeight);
window.addEventListener('resize', adaptElementHeight);

У цьому прикладі ми використовуємо властивість innerHeight об'єкта Window, щоб здійснити плавну анімаційну прокрутку сторінки до певного цільового елементу (targetElement). Коли користувач клікає на кнопці або іншій події, сторінка прокручується до такої позиції, щоб цей елемент був приблизно посередині видимої частини вікна браузера.

// Отримуємо посилання на цільовий елемент, до якого потрібно прокрутити сторінку
var targetElement = document.getElementById('targetElement');

// Функція для прокрутки до цільового елементу
function scrollToElement() {
  var windowHeight = window.innerHeight; // Отримуємо висоту вікна браузера
  var elementTop = targetElement.getBoundingClientRect().top; // Отримуємо позицію цільового елементу
  var offset = 20; // Зміщення для кращого вигляду

  // Прокручуємо сторінку до цільового елементу
  window.scrollTo({
    top: elementTop - (windowHeight / 2) + offset, // Прокручуємо до середини видимої частини вікна
    behavior: 'smooth' // Плавна анімація прокрутки
  });
}

// Викликаємо функцію при кліку на кнопку або іншій події
var scrollButton = document.getElementById('scrollButton');
scrollButton.addEventListener('click', scrollToElement);

JS довідник

JavaScript

Наповнення JS розділу