Устранение «чрезмерной прокрутки» на веб-страницах

В Chrome для Mac «чрезмерная прокрутка» — это нежелательный эффект, который позволяет пользователям перетаскивать страницу за пределы ее обычной области просмотра, как видно на представленном изображении. Чтобы решить эту проблему и улучшить взаимодействие с пользователем, рассмотрите следующие два метода:

Метод 1: ограничение чрезмерной прокрутки

Если вы хотите полностью отключить чрезмерную прокрутку, используйте следующий код CSS:

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

Свойство overflow: скрытое в элементе предотвращает видимость любого содержимого переполнения, эффективно ограничивая страницу в ее области просмотра. Свойство overflow: auto элемента

Метод 2: настройка поведения чрезмерной прокрутки

Чтобы настроить и контролировать поведение чрезмерной прокрутки, используйте свойство touch-action:

body {
    -webkit-touch-callout: none;
    -webkit-touch-action: manipulation;
}

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