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.