Day 53: disabling pull-to-refresh
posted on
It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
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.
Further reading
Do you want to learn even more awesome CSS?
I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.
Learn more about the workshop!
Overview: 100 Days Of More Or Less Modern CSS