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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.