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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Синтаксис

element.style.overflowX

Значення

Return

Переглядачі

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

Приклади

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

let tableContainer = document.getElementById('tableContainer');
let toggleScrollButton = document.getElementById('toggleScroll');

toggleScrollButton.addEventListener('click', function() {
    if (tableContainer.style.overflowX === 'hidden') {
        tableContainer.style.overflowX = 'scroll';
    } else {
        tableContainer.style.overflowX = 'hidden';
    }
});

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

addButton.addEventListener('click', function() {
    let newItem = document.createElement('div');
    newItem.textContent = 'Новий елемент';
    newItem.style.display = 'inline-block';
    newItem.style.marginRight = '10px';
    listContainer.appendChild(newItem);

    if (listContainer.scrollWidth > listContainer.clientWidth) {
        listContainer.style.overflowX = 'scroll';
    } else {
        listContainer.style.overflowX = 'hidden';
    }
});