Как отключить скролл css

Чтобы отключить скролл страницы в CSS, можно использовать свойство overflow для задания свойства hidden. Это свойство скрывает любой контент, который выходит за границы родительского элемента.

Например, если вы хотите отключить скролл на всей странице, вы можете добавить следующее правило в свой CSS файл:

body {
  overflow: hidden;
}

Это скроет скролл на странице, но также отключит и возможность прокрутки страницы. Если вы хотите отключить скролл только для определенного элемента, вы можете применить этот стиль к этому элементу:

.container {
  overflow: hidden;
}

Здесь мы применяем свойство overflow: hidden к элементу с классом container. Это скроет все контент, который выходит за границы элемента с классом container.

Если вы хотите отключить только горизонтальный или вертикальный скролл, вы можете использовать свойства overflow-x и overflow-y. Например:

body {
  overflow-x: hidden; /* отключает горизонтальный скролл */
  overflow-y: scroll; /* включает вертикальный скролл */
}

В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.

пон

Отключить прокрутку всей страницы можно свойством overflow: hidden у body:

body {
  overflow: hidden;
}

Контент, который не помещается в окно, останется на месте, но прокрутить к нему не получится.

Отключить только одну полосу

.container {
  overflow-x: hidden; /* без горизонтальной прокрутки */
  overflow-y: auto;   /* вертикальная — по необходимости */
}

Горизонтальный скролл чаще всего появляется из-за элемента шире экрана. overflow-x: hidden у body его прячет, но лучше найти этот элемент: в DevTools он торчит за правой границей.

Скрыть полосу, оставив прокрутку

Блок прокручивается колёсиком и пальцем, а полосы не видно:

.scroll-box {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox и новые Chrome, Edge */
}
.scroll-box::-webkit-scrollbar {
  display: none; /* Safari и старые Chrome */
}

Запретить прокрутку при открытом модальном окне

Класс добавляют body, когда окно открыто, и убирают при закрытии:

body.no-scroll {
  overflow: hidden;
}

Когда полоса прокрутки исчезает, страница сдвигается вбок на её ширину. Свойство scrollbar-gutter: stable у html заранее резервирует место под полосу, и сдвига не будет.

На iOS Safari overflow: hidden у body иногда не останавливает прокрутку. Добавьте его же элементу html.

Свойства блоков и прокрутки разбирают в курсе «Профессиональная вёрстка».