TIL Disable pull-to-refresh on mobile

POSTED ON: Jul 15, 2021

On Mobile devices:
If you pull your window down enough, it'll trigger a refresh.

Maybe you don't want that to happen, such as in a modal.

Look into the overscroll-behavior - MDN link.

body {
 overscroll-behavior-y: contain;
}

By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

As with most things on mobile, check the caniuse - css-overscroll-behavior

As of 2021: Safari for iOS doesn't have it implemented.

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023