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

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

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

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

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

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

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

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

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

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

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

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

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

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

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Слідкуйте за зміною розміру вікна браузера, використовуючи innerHeight разом з обробниками подій, такими як resize. Це дозволить вам динамічно адаптувати вміст сторінки під нові розміри.

автор: Bond правити

Нотатка

У мобільних браузерах висота може змінюватися залежно від видимості панелей браузера.

автор: Bond правити

Нотатка

Значення, що повертає innerHeight, може змінюватися при зміні розмірів вікна браузера користувачем.

автор: Bond правити

Нотатка

Важливо розуміти, що innerHeight не включає висоту панелі вкладок, панелі адреси або панелей інструментів браузера.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Window: innerHeight property

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

<div id="adaptiveElement">Демонстраційний елемент</div>

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

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

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

<div id="targetElement">Демонстраційний елемент</div>
<button id="scrollButton">Прокрутити</button>

// Отримуємо посилання на цільовий елемент, до якого потрібно прокрутити сторінку
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);