Чтобы отключить pull to refresh, задайте overscroll-behavior-y: contain прокручиваемому элементу страницы, обычно body или html:
body {
overscroll-behavior-y: contain;
}Это однострочный пример из статьи Chrome об этом свойстве: там сказано, что он отключает pull-to-refresh, но сохраняет эффект свечения при overscroll (Chrome for Developers, 2017). Свойство управляет тем, что происходит, когда прокрутка доходит до края прокручиваемого контейнера, а MDN называет среди его применений избавление от поведения браузера вроде «pull to refresh» (MDN, октябрь 2026). Поддержка неоднородна: MDN помечает overscroll-behavior как не входящее в Baseline, а поддержка в Safari частичная, поэтому проверяйте его на телефонах, на которые вы ориентируетесь.
Что делает overscroll-behavior
overscroll-behavior определяет, продолжится ли прокрутка, дошедшая до границы, в родителе и показывает ли браузер собственные эффекты overscroll. По словам MDN, по умолчанию мобильные браузеры при достижении верха или низа страницы или области прокрутки обычно показывают эффект отскока, а иногда даже обновляют страницу. У свойства четыре ключевых слова (MDN, определения):
| Значение | Цепочка прокрутки к родителю | Эффект отскока |
|---|---|---|
auto |
Разрешена (по умолчанию) | Включён |
contain |
Заблокирована | Может всё равно появиться |
none |
Заблокирована | Отключён |
chain |
Разрешена | Отключён |
Scroll chaining (цепочка прокрутки) — это поведение браузера по умолчанию: когда дочерний элемент доходит до границы, прокрутка передаётся родителю. В примере Chrome выдвижная панель приложения доходит до низа, и страница позади неё начинает прокручиваться. overscroll-behavior — сокращённая запись для overscroll-behavior-x и overscroll-behavior-y, а два ключевых слова задают x и y именно в таком порядке.
contain или none для pull to refresh
Берите contain, когда нужно остановить обновление, но сохранить отклик платформы на overscroll, и none, когда нужно убрать ещё и сам эффект. В статье Chrome contain описан как предотвращающий scroll chaining при сохранении локальных эффектов вроде свечения overscroll на Android, а none — как то же самое, но с убранными эффектами. Для pull to refresh на самой странице:
/* остановить pull to refresh, оставить свечение */
body { overscroll-behavior-y: contain; }
/* убрать ещё и свечение, и эффект резинки */
body { overscroll-behavior-y: none; }Там же отмечено, что на html значение contain предотвращает навигацию через overscroll, а горизонтальное none задумывалось для блокировки навигации свайпом влево и вправо, которую Chrome на момент написания статьи в 2017 году ещё не реализовал. Прежде чем полагаться на это для жестов-свайпов, проверьте актуальное поведение.
Отключая pull to refresh, вы убираете жест, которым люди обновляют страницу. Если на странице данные постоянно обновляются, дайте пользователям кнопку обновления или собственный жест вытягивания, потому что браузерного уже не будет.
body или контейнер прокрутки
Задавайте свойство тому элементу, который прокручивается, потому что оно работает только для контейнеров прокрутки. Для страницы это элемент, определяющий область просмотра: html или body. Для внутренней панели, выдвижного меню или списка чата задайте его самой панели:
.chat-list {
height: 12em;
overflow: auto;
overscroll-behavior: contain;
}Это не даёт странице позади панели прокручиваться, когда пользователь дошёл до конца списка; в примере MDN такой же приём используется для диалогов. Две детали из MDN:
- Контейнер прокрутки без прокручиваемого переполнения, например элемент с
overflow: hidden, всегда находится на своей границе прокрутки, поэтому нестандартноеoverscroll-behaviorна нём блокирует цепочку прокрутки к предкам. По словам MDN, это может не дать прокручиваться фону, пока открыт диалог или оверлей. <iframe>не является контейнером прокрутки, поэтому на сам элемент iframe свойство не действует. Чтобы управлять цепочкой прокрутки изнутри iframe, задайте его и дляhtml, и дляbodyдокумента iframe.
Поддержка браузерами в 2026 году
Ключевые слова auto, contain и none поддерживаются с Chrome 63, Firefox 59 и Safari 16 (Safari iOS 16) по MDN browser-compat-data 8.1.7 (октябрь 2026). Поддержка в Safari помечена как частичная: свойство не действует на контейнеры прокрутки без прокручиваемого переполнения, и та же пометка стоит у Samsung Internet. Ключевое слово chain новее: BCD указывает его с Chrome 150 и Firefox 157, а в Safari его нет. У самого свойства в BCD есть и отдельная верхнеуровневая запись, которая начинается с Chrome 144 и Firefox 150. Поэтому web-features 3.44.0 не относит overscroll-behavior к Baseline, а MDN пишет, что оно «not Baseline», потому что не работает в некоторых из самых распространённых браузеров.
Что это значит для pull to refresh: в статье Chrome используется форма с overscroll-behavior-y и значением contain или none, а Safari 16 добавил это свойство (WebKit, сентябрь 2022). Останавливает ли Safari на iPhone жест обновления на уровне страницы, в заметках о выпуске WebKit и в MDN не сказано, поэтому проверьте это на iPhone.
Как проверить на телефоне
Проверяйте pull to refresh на настоящем устройстве или в эмуляторе, потому что это жест касанием.
- Загрузите страницу на телефоне, прокрутите в самый верх и потяните вниз. Без этого CSS браузер может обновить страницу или показать отскок. С
overscroll-behavior-y: containнаbodyничего перезагружаться не должно. - Прокрутите вложенную панель до конца и продолжайте тянуть. Страница позади должна оставаться на месте, если у панели стоит
contain. - Повторите в каждом браузере, который вы поддерживаете. У Chrome на Android, Safari на iPhone и Samsung Internet выше указаны свои особенности.
- Повторите в установленном веб-приложении, если вы его выпускаете; о том, чем отличается установка на разных платформах, читайте в статье что такое прогрессивное веб-приложение.
Для Android с десктопа смотрите статью как проверить сайт на Android с компьютера. Для iOS без телефона — как проверить сайт на iPhone без iPhone, а для остальной части мобильного тестирования — чек-лист тестирования мобильного сайта.
Mobile View Extension перезагружает вкладку с user agent, размером экрана и pixel ratio телефона, так что вы видите раскладку и то, какая страница отдаётся, но ввод идёт мышью. Событий касания расширение не отправляет, поэтому потянуть страницу для обновления в нём нельзя, а работает оно на движке десктопного Chrome, так что поведение Safari не воспроизводится. Используйте его, чтобы проверить раскладку собственной кнопки обновления, а для самого жеста берите устройство или симулятор.
Частые вопросы
Как отключить pull to refresh в CSS?
Задайте overscroll-behavior-y: contain для body или html. В статье Chrome это названо одной строкой, которая отключает pull-to-refresh и сохраняет свечение overscroll; чтобы убрать и свечение, используйте none.
Чем отличаются overscroll-behavior contain и none?
contain предотвращает scroll chaining и всё же может показывать эффект отскока, а none предотвращает и цепочку прокрутки, и отскок (MDN). Для pull to refresh на странице оба значения останавливают обновление в Chrome, по его статье.
Работает ли overscroll-behavior в Safari?
Safari 16 и новее поддерживают это свойство, но частично: оно не действует на контейнеры прокрутки без прокручиваемого переполнения (MDN browser-compat-data 8.1.7). Проверьте на iPhone, что происходит с жестом на уровне страницы.
Что такое scroll chaining?
Scroll chaining — это передача прокрутки родительскому контейнеру, когда дочерний дошёл до границы прокрутки, например конец диалога заставляет прокручиваться страницу позади. overscroll-behavior: contain его останавливает.