Disabling Pull-to-Refresh Feature on Mobile Browsers using CSS

Published on December 14, 2019

Pull-to-refresh can be disabled on mobile browsers using the overscroll-behaviour CSS property.

Pull-to-refresh is a popular feature to refresh the page on mobile browsers. However in some cases we would like to disable this default behavior, and instead handle it through custom Javascript code.

Pull-to-refresh can be disabled using the overscroll-behaviour CSS property. Like the name indicates, this allows to modify the default behavior when a container is over-scrolled.

Setting overscroll-behaviour: contain disables scroll to be transferred to the neighboring areas — that is, over-scroll is contained within the element itself. Setting this on <body> will prevent over-scroll to be passed on the browser, and thus prevent pull-to-refresh action.

body {
    overscroll-behavior: contain;

This will contain over-scrolling behavior both horizontally and vertically. However pull-to-refresh happens vertically, and in some cases we would like to have the default overscroll behavior in the horizontal direction (page may have some slider or carousal that has left-right swipe events).

This can be done using overscroll-behaviour-y.

/* contain overscroll behaviour only in vertical direction */
body {
    overscroll-behavior-y: contain;

Basically overscroll-behaviour is a shorthand property for overscroll-behaviour-x and overscroll-behaviour-y.

Useful Resources

In this Tutorial