JS властивість CSSStyleDeclaration.overflowY

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

element.style.overflowY – це властивість, яка визначає, як обробляти переповнення вмісту елемента по вертикалі. Вона дозволяє контролювати, чи буде вміст, що виходить за межі вертикального простору елемента, видимим, прихованим, прокручуваним чи автоматично оброблюваним браузером. Значення можуть бути наступними: visible, hidden, scroll, auto.

Щоб встановити значення властивості overflowY для певного елемента, необхідно спочатку отримати доступ до цього елемента через DOM (Document Object Model), а потім встановити необхідне значення.

// Отримуємо доступ до елемента за допомогою його ідентифікатора
let element = document.getElementById('myElement');

// Встановлюємо overflowY на 'scroll'
element.style.overflowY = 'scroll';

У цьому прикладі для елемента з ідентифікатором myElement встановлюється значення overflowY на scroll, що додає вертикальну смугу прокрутки, навіть якщо вміст не виходить за межі елемента.

Отримання значення

Для отримання поточного значення властивості overflowY можна використати наступний код:

// Отримуємо доступ до елемента за допомогою його ідентифікатора
let element = document.getElementById('myElement');

// Отримуємо значення overflowY
let overflowYValue = element.style.overflowY;

console.log(overflowYValue); // Виведе поточне значення властивості overflowY

Цей код зчитує і виводить поточне значення властивості overflowY для обраного елемента.

Динамічне керування

Властивість overflowY часто використовується для динамічного керування інтерфейсом користувача. Наприклад, можна створити кнопку, яка перемикає значення overflowY між hidden і scroll для певного елемента:

let button = document.getElementById('toggleButton');
let element = document.getElementById('myElement');

button.addEventListener('click', function() {
    if (element.style.overflowY === 'hidden') {
        element.style.overflowY = 'scroll';
    } else {
        element.style.overflowY = 'hidden';
    }
});

Цей код додає обробник події на кнопку, який перемикає значення overflowY між hidden і scroll при кожному натисканні кнопки. Це дозволяє користувачам легко контролювати відображення вертикального переповнення вмісту елемента.

Приклади значень

• visible: Вміст, що виходить за межі елемента, буде видимим.
• hidden: Вміст, що виходить за межі елемента, буде прихованим.
• scroll: Завжди додає вертикальну смугу прокрутки.
• auto: Додає вертикальну прокрутку тільки в разі, якщо вміст виходить за межі елемента.

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

Синтаксис

element.style.overflowY

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

let container = document.getElementById('container');
let addButton = document.getElementById('addButton');

addButton.addEventListener('click', function() {
    let newItem = document.createElement('div');
    newItem.textContent = 'Новий елемент';
    newItem.style.height = '50px';
    newItem.style.border = '1px solid black';
    container.appendChild(newItem);

    if (container.scrollHeight > container.clientHeight) {
        container.style.overflowY = 'scroll';
    } else {
        container.style.overflowY = 'hidden';
    }
});

let textContainer = document.getElementById('textContainer');
let toggleButton = document.getElementById('toggleScroll');

toggleButton.addEventListener('click', function() {
    if (textContainer.style.overflowY === 'hidden') {
        textContainer.style.overflowY = 'auto';
        textContainer.style.height = '200px'; // Фіксуємо висоту для зручної прокрутки
    } else {
        textContainer.style.overflowY = 'hidden';
        textContainer.style.height = 'auto'; // Авто висота для відображення всього тексту
    }
});