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

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

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

Властивість overflow може мати декілька значень:

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

Для роботи з element.style.overflow потрібно спочатку отримати доступ до елемента через DOM (Document Object Model), а потім встановити або отримати значення цієї властивості.

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

Встановлення значення

Щоб встановити значення властивості overflow для певного елемента, можна використати наступний код:

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

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

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

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

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

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

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

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

У цьому прикладі ми спочатку отримуємо доступ до елемента з ідентифікатором myElement, а потім зчитуємо його поточне значення властивості overflow.

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

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

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

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

Цей код додає обробник події на кнопку, який перемикає значення overflow між hidden і auto при кожному натисканні кнопки.

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

правити

Порада

Коли застосовуєте overflow: auto, варто враховувати ширину смуги прокрутки, яка може впливати на загальний макет сторінки. Щоб уникнути зміщення елементів при появі прокрутки, можна додати додаткові стилі, наприклад, padding або margin, які компенсують цей ефект.

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

Порада

Іноді при приховуванні вмісту за допомогою overflow: hidden важливо враховувати вплив на доступність. Вміст, який виходить за межі видимого блоку, може залишитися недоступним для користувачів із обмеженими можливостями, які використовують екранні читачі. Щоб уникнути цього, переконайтеся, що весь важливий контент залишається в межах видимого блоку.

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

Порада

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

element.style.scrollBehavior = 'smooth';

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

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

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

Синтаксис

element.style.overflow

Переглядачі

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

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

Переглядач
	1	1	1	7	12	4

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

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

Приклади

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

<div id="contentContainer" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<div id="toggleOverflow">Демонстраційний елемент</div>

.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('contentContainer');
let toggleButton = document.getElementById('toggleOverflow');

toggleButton.addEventListener('click', function() {
    if (container.scrollHeight > container.clientHeight) {
        container.style.overflow = 'auto';
    } else {
        container.style.overflow = 'hidden';
    }
});

<div id="expandableContainer" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>
<button id="expandButton">Розгорнути</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 expandableContainer = document.getElementById('expandableContainer');
let expandButton = document.getElementById('expandButton');

expandButton.addEventListener('click', function() {
    if (expandableContainer.style.overflow === 'hidden') {
        expandableContainer.style.height = expandableContainer.scrollHeight + 'px';
        expandableContainer.style.overflow = 'auto';
    } else {
        expandableContainer.style.height = '200px';
        expandableContainer.style.overflow = 'hidden';
    }
});