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

<header>
  <h2 class="title">element.style.overflowY</h2>
  <p class="description">Керує вертикальним переповненням вмісту елемента</p>
</header>
<main>
  <div class="result">
    <div id="contentContainer" class="container">
      <p>Цей текст є прикладом великого вмісту, який може переповнити контейнер по вертикалі. Ви можете використовувати кнопки нижче, щоб змінити поведінку переповнення і побачити різницю. Текст продовжує йти далі, щоб показати можливості вертикального прокручування. Ще більше тексту для демонстрації. Ще більше тексту для демонстрації. Ще більше тексту для демонстрації. Ще більше тексту для демонстрації. Ще більше тексту для демонстрації. Ще більше тексту для демонстрації.</p>
    </div>
    <button id="visibleButton">Visible</button>
    <button id="hiddenButton">Hidden</button>
    <button id="scrollButton">Scroll</button>
    <button id="autoButton">Auto</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.container {
  width: 300px;
  height: 150px;
  border: 1px solid #333;
  padding: 10px;
  overflow-y: visible;
}

let contentContainer = document.getElementById('contentContainer');
let visibleButton = document.getElementById('visibleButton');
let hiddenButton = document.getElementById('hiddenButton');
let scrollButton = document.getElementById('scrollButton');
let autoButton = document.getElementById('autoButton');

visibleButton.addEventListener('click', function () {
  contentContainer.style.overflowY = 'visible';
});

hiddenButton.addEventListener('click', function () {
  contentContainer.style.overflowY = 'hidden';
});

scrollButton.addEventListener('click', function () {
  contentContainer.style.overflowY = 'scroll';
});

autoButton.addEventListener('click', function () {
  contentContainer.style.overflowY = 'auto';
});
//# sourceURL=pen.js