Получить профессию в Skypro
Остановка 'перебегания' страницы в Chrome: аналог iOS на Mac
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Если вам нужно запретить скроллинг страницы выше её верхней границы, примените к элементу <body> CSS-свойство overscroll-behavior со значением none:
body {
/* ограничиваем скроллинг, страница останавливается */
overscroll-behavior: none;
}Этот приём предотвращает выход содержимого страницы за пределы видимой области при прокрутке.
Проникновение в суть проблемы, или как настроить границы
Можно настроить поведение прокрутки более детально, воспользовавшись свойством overscroll-behavior по оси X и Y. Можно, наоборот, допустить фрагменты функциональности, как "потянуть для обновления", в отдельных местах страницы, запретив его в других местах:
document.body.addEventListener('touchmove', function(e) {
/* попытки прокручивания будут блокированы */
e.preventDefault();
}, { passive: false });Важно: Следите за тем, чтобы ваши изменения не нарушали привычное взаимодействие пользователей с интерфейсом на сенсорных устройствах.
Визуализация
Воззрите на веб-страницу как на картину в рамке (🖼):
Рамка (🖼): [Ваше творение]Настройте так, чтобы она оставалась неподвижной и не "дрыгалась":
До:
🖼
🌄🌅🏞 (Содержимое "выпадает" из рамки)
После:
🖼
🌆 (Всё на месте! Эффект перелистывания преодолён)Чтобы достичь этого, применим CSS-стили для фиксации содержимого в рамке:
body, html {
/* фиксируем прокрутку */
overflow: hidden;
}В результате изображение безупречно помещается в рамки, эффекта перелистывания нет.
Полоса прокрутки, ваш новый лучший друг
Чтобы обеспечить видимость полосы прокрутки на разных платформах, разместите свой контент внутри контейнера <div>, оснастив его соответствующими свойствами. Это обеспечит одинаковое поведение прокрутки и исключит возможность нежелательных перемещений:
.wrapper {
/* установка для области прокрутки */
overflow-y: auto;
max-height: 100vh;
}Класс .wrapper ограничивает ненужную прокрутку, обеспечивая гладкий и предсказуемый пользовательский опыт, аналогичный нативным приложениям.
Адаптация под нужную платформу
Используйте свойство -webkit-overflow-scrolling со значением touch, чтобы гарантировать мягкий скроллинг на iOS-устройствах, это сделает использование сайта более приятным:
body {
/* прокрутка плавная, как масло на тёплой сковородке */
-webkit-overflow-scrolling: touch;
}Таким образом, вы подражаете инерционному скроллингу, характерному для iPad и iPhone, обеспечивая единый визуальный опыт на всех устройствах.
Обсуждение практических аспектов
Помните, что все изменения влияют на удобство восприятия вашего сайта пользователем. Старайтесь не нарушать эффект отталкивания, к которому привыкли пользователи, и придерживайтесь продуманных и функциональных решений для предотвращения перелистывания страницы. Особенно важно проводить тестирование, чтобы обеспечить удобный и интуитивно понятный пользовательский интерфейс.