After a late-night scroll through my BlueSky, I stumbled upon a CSS tip from Adam Argyle. It was one of those aha moments, where something so simple can make such a big difference.

The issue? First, let me show the tip:

Don't:
overflow-x: auto;
overscroll-behavior: contain;

Do:
overflow-x: auto;
overscroll-behavior-x: contain; 

Why?
The page may feel unresponsive! Trying to vertically scroll on a 'x' scroller that's containing 'x' and 'y' gestures, traps the 'y' gesture.

Let me put that another way:

Using ‘overscroll-behavior: contain;‘ instead of ‘overscroll-behavior-x: contain;‘ could trap vertical gestures when scrolling horizontally.

Therefore this tweak not only improves responsiveness but also ensures the user experience is seamless – especially on devices where horizontal scrolling is a key feature, i.e. photography galleries.

This information gave me repair ideas for my website, ezcreate.com.au, as it has occasional scrolling hiccups on mobile devices.

By swapping out the generic overscroll-behavior with overscroll-behavior-x, I ensured that vertical gestures outside the horizontal scroll behaved as expected. This little change made my site feel buttery smooth.
It only took a few minutes to implement, test, upload and slyly sip at my late-night luke-warm coffee.

XTRA CSS TIPS:

I found some more CSS attributes that can make a difference:

‘scroll-snap-type‘ [W3Schools]

• What it does: Creates a controlled scrolling experience by snapping to elements as you scroll.
• How it helps: Perfect for image galleries or product carousels, it ensures users land on a specific item rather than leaving it half-visible. I plan to use this in an upcoming addition so a small selection of my merchandise or photography appears within a more polished gallery.

‘touch-action‘ [W3Schools]

• What it does: Specifies how touch gestures are handled (e.g., scrolling, zooming).
• How it helps: If you set ‘touch-action: pan-y;’ on vertical scrolling areas, it prevents accidental horizontal swipes from derailing the browsing experience. Great for blogs or service description sections.

‘overflow-anchor‘ [W3Schools]

• What it does: Reduces layout shifts by preventing scroll positions from jumping unexpectedly.
• How it helps: Useful for dynamic content like testimonials, ensuring smooth scrolling as items load in or resize.

‘-webkit-overflow-scrolling: touch;‘ [W3Schools]

• What it does: Enables momentum scrolling on iOS devices.
• How it helps: Makes long content areas like FAQs or pricing tables feel natural and intuitive when swiped.

By learning and applying these CSS tweaks, my website is not only becoming more functional but also a pleasure to browse.

Thanks again to Adam Argyle for sharing this insight! If you’re looking for smooth scrolling and an intuitive user interface, give these tips a try … You won’t regret it.