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

css
Published on December 13, 2019

Pull-to-refresh can be disabled on mobile browsers using the overflow-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 behaviour, and instead handle it through custom Javascript code.

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

Setting overflow-behaviour: contain disables scroll to be transferred to the neighbouring 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 behaviour both horizontally and vertically. However pull-to-refresh happens vertically, and in some cases we would like to have the default overscroll behaviour in the horizontal direction (page may have some slider or carousal that has left-right swipe events).

This can be done using overflow-behaviour-y.

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

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

Useful Resources

Related Tutorials
How to Change the Theme Color of the Address Bar in Mobile Browsers
Comments
Loading Comments