This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
On day 47, I introduced you to the overscroll-behavior property, and I showed you how to use it to disable scroll-chaining. There’s another feature we can disable using this property.
In some mobile browsers, you can refresh the page by swiping down when the page is scrolled to the very top. That's called pull-to-refresh. This is a great feature, but depending on what the user’s interacting with on the page, this can be undesirable.
You can use overscroll-behavior: none; to disable pull-to-refresh.
html, body {
overscroll-behavior: none;
}You have to put it on <html> and <body> because in Chrome it only works on the <body> and in Safari only on the <html> element (tested on Android 12 Chrome, FF, Samsung Internet and Safari 16 on iOS).
Please don't disable this feature by default, only when it's beneficial to your users.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-12-07T09:38:54+00:00) Day 53: disabling pull-to-refresh. Retrieved from https://www.scien.cx/2022/12/07/day-53-disabling-pull-to-refresh/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.