Как сделать прокрутку страницы в html

Разрешить или запретить прокрутку страницы можно сделать с помощью элемента div и свойства overflow в CSS.

Например, создадим блок с классом scroll и применим к нему свойство overflow-y: scroll;:

<div class="scroll">
  <!-- Здесь будет контент, который будет прокручиваться -->
</div>

Теперь, если содержимое блока scroll превысит высоту блока, то появится полоса прокрутки, с помощью которой можно будет прокручивать содержимое.

Страница прокручивается сама, когда содержимое не помещается в окно. Обычно вопрос про одно из трёх: прокрутка внутри блока, плавная прокрутка к разделу или запрет прокрутки.

Прокрутка внутри блока

Блоку задают высоту и overflow:

.chat {
  height: 300px;
  overflow-y: auto;
}

auto показывает полосу прокрутки, только когда содержимое не помещается. scroll показывает её всегда. Горизонтальная прокрутка — overflow-x: auto, удобна для широких таблиц на телефоне.

Прокрутка к разделу по ссылке

<a href="#contacts">Контакты</a>

<section id="contacts">…</section>

Плавная прокрутка:

html {
  scroll-behavior: smooth;
}

Если наверху фиксированная шапка, она закроет заголовок раздела. Отступ задают так:

section {
  scroll-margin-top: 80px;
}

Кнопка «Наверх»

<button type="button" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">Наверх</button>

Прокрутить к элементу из JavaScript:

document.getElementById('contacts').scrollIntoView({ behavior: 'smooth' });

Запретить прокрутку страницы

Например, пока открыто модальное окно:

body.modal-open {
  overflow: hidden;
}

Класс добавляют при открытии окна и убирают при закрытии.

Прокрутки нет, хотя содержимое не помещается

• у html или body задано overflow: hidden или height: 100vh;
• у блока не задана высота, и он растягивается вместе с содержимым;
• внутри flex-контейнера у дочернего блока не задан min-height: 0.

Лишняя горизонтальная прокрутка

Какой-то элемент шире экрана. Найти его поможет временное правило * { outline: 1px solid red; }.

Оформление страниц разбирают в курсе «Профессиональная вёрстка».