Прокрутка

• overflow - определят, что делать с содержимым, которое выходит за рамки блока;
  • visible - содержимое выходит за пределы блока (по умолчанию);
  • hidden - обрезает содержимое (прокрутка скрыта);
  • scroll - всегда показывает полосы прокрутки;
  • auto - показывает полосы прокрутки только при необходимости;
• overflow-x - управляет прокруткой по горизонтали;
• overflow-y - управляет прокруткой по вертикали;
• scroll-behavior - определяет плавность прокрутки;
  • smooth - плавная прокрутка;

Например. Изменим файл index.html:

<div class="scroll-box">
    <div class="content">
        Здесь содержимое, которое выходит за рамки контейнера, поэтому
        появляется прокрутка по вертикали и горизонтали.
    </div>
</div>

Изменим файл styles.css:

.scroll-box {
    width: 300px;
    height: 150px;
    border: 2px solid #333;
    overflow: auto;
    scroll-behavior: smooth;
    white-space: nowrap; /* без переноса слов на новую строку */
    padding: 10px;
}

.content {
    width: 600px;
    height: 300px;
    background: linear-gradient(45deg, #00e5a4, transparent);
}