Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
10 Июл 2023
2 мин
994

Отключение прокрутки на теле HTML

Проблема, с которой часто сталкиваются начинающие веб-разработчики, заключается в необходимости отключить прокрутку на теле HTML. Это может быть полезно

Проблема, с которой часто сталкиваются начинающие веб-разработчики, заключается в необходимости отключить прокрутку на теле HTML. Это может быть полезно в различных ситуациях, например, при создании модального окна или всплывающего меню, когда необходимо, чтобы основное содержимое сайта оставалось неподвижным.

<body>
    <div class="modal">
        <h1>Модальное окно</h1>
        <p>Здесь могло быть ваше содержимое...</p>
    </div>
    <div class="content">
        <p>Основное содержимое сайта...</p>
    </div>
</body>

Однако, при применении стандартных методов возникают проблемы. Обычно используются две основные стратегии:

  1. Свойство CSS overflow: hidden; для тега <body>. Это свойство скрывает полосу прокрутки, но не отключает саму прокрутку. То есть, пользователь все еще может прокручивать страницу, используя клавиатуру или сенсорные жесты.

    body {
        overflow: hidden;
    }
    
  2. Свойство CSS position: fixed; для тега <body>. Этот метод действительно отключает прокрутку, но он также прокручивает страницу наверх, что может быть недопустимо для некоторых приложений.

    body {
        position: fixed;
    }
    

К счастью, существует альтернативный подход, который позволяет отключить прокрутку без лишних побочных эффектов. Этот метод заключается в использовании свойства height и overflow вместе, чтобы ограничить высоту тела и отключить прокрутку:

body {
    height: 100vh;
    overflow: hidden;
}

В этом случае, 100vh означает 100% от высоты вьюпорта, что фактически ограничивает высоту тела до размера экрана. Свойство overflow: hidden; затем отключает прокрутку. Это работает, потому что, когда высота тела ограничена, нет ничего, что можно было бы прокрутить.

Обратите внимание, что этот метод может влиять на внешний вид и расположение элементов на странице, поэтому его следует использовать с осторожностью.

Добавить комментарий

Подарок
Забрать подарок