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

правити

Порада

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

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

Це допоможе автоматично керувати поведінкою прокрутки в залежності від розміру вмісту.

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

Порада

Для кращої продуктивності при анімації горизонтального прокручування, використовуйте CSS-властивість will-change. Це дозволяє браузеру готуватися до змін, що підвищує продуктивність і знижує затримки. Наприклад:

element.style.willChange = 'scroll-position';

Це забезпечить більш плавну анімацію прокрутки.

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

Порада

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

let gallery = document.getElementById('imageGallery');
gallery.style.display = 'flex';
gallery.style.overflowX = 'scroll';

Це допоможе створити плавний і зручний інтерфейс для користувача.

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

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

Синтаксис

element.style.overflowX

Переглядачі

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

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

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

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

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

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

Переглядач
	-	-

Приклади

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

<table id="tableContainer">
    <tr><td>комірка 1</td><td>комірка 2</td></tr>
</table>
<div id="toggleScroll">Демонстраційний елемент</div>

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

<ul id="listContainer">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>
<button id="addButton">Додати</button>

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