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 дозволяє гнучко керувати відображенням вмісту елементів на веб-сторінці, забезпечуючи зручний користувацький досвід і адаптивний дизайн. Це особливо корисно для створення вертикально прокручуваних контейнерів, таких як текстові блоки, списки або таблиці, які можуть перевищувати висоту екрану або контейнера.

правити

Порада

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

if (window.innerWidth < 600) {
    element.style.overflowY = 'auto';
} else {
    element.style.overflowY = 'visible';
}

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

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

Порада

Використання overflowY у поєднанні з анімаціями може покращити UX вашого сайту. Наприклад, можна приховувати і показувати довгі списки з анімацією прокрутки:

let toggleButton = document.getElementById('toggleButton');
let content = document.getElementById('content');

toggleButton.addEventListener('click', function() {
    if (content.style.overflowY === 'hidden') {
        content.style.overflowY = 'auto';
        content.style.height = '200px';
    } else {
        content.style.overflowY = 'hidden';
        content.style.height = '0px';
    }
});

Це додає динамічності інтерфейсу і робить його більш інтерактивним.

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

Порада

Для плавного скролінгу вмісту використовуйте властивість scroll-behavior: smooth у CSS. Це дозволяє створити приємніший користувацький досвід при прокрутці великих блоків тексту або інших елементів. У JavaScript можна динамічно змінювати цю властивість через клас:

element.classList.add('smooth-scroll');

.smooth-scroll {
    scroll-behavior: smooth;
}

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

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

Синтаксис

element.style.overflowY

Переглядачі

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

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

Переглядач
	1	3.5	3	9.5	12	5

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

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

Приклади

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

<div id="container" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<button id="addButton">Додати</button>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

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';
    }
});

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

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'; // Авто висота для відображення всього тексту
    }
});