I would like to know if there is any possibility to avoid, that when I am browsing in my mobile application, the browser reloads the page when I slide the screen down, in case of Chrome for Android.
When I swipe too hard on Chrome mobile it reloads the page.
I would like to know if there is any configuration that can be done during the programming of the page to prevent this from happening.
Add in your CSS the following property to your
body
MDN translation:
The CSS property
overscroll-behavior
sets what a browser does when it reaches the boundary of a scroll area. It is a shorthand foroverscroll-behavior-x
andoverscroll-behavior-y
.The property takes three possible values:
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 with scrolling content on top of a scrolling content page, once the dialog's scroll limit is reached, the underlying page will start scrolling, which is called displacement chaining.
Android's native Chrome refresh action refreshes the entire page
In some cases these behaviors are not desirable. It can be used
overscroll-behavior
to get rid of unwanted scroll chaining and "pull to refresh" type behavior inspired by the browser's Facebook/Twitter app.Important:
overscroll-behavior
Requires Chrome 63+. It is under development or being considered by other browsers. See chromestatus.com for more information.Sources:
https://developers.google.com/web/updates/2017/11/overscroll-behavior
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior