Adding smooth horizontal scroll sections to your website

Why this post :thinking:?

Ever since I discovered the CSS property -webkit-overflow-scrolling: touch; I’ve been a big fan. If done thoughtfully, it can be a useful design tool to create smooth horizontal scroll sections on websites. For example a product listing on an e-commerce site:

Unfortunately though, browser support isn’t great :cry:.

It only works on IOS touch devices.

And it doesn’t come with a JavaScript event API :sob:.

So my hands are tied if I’d want to implement some kind of dot or previous/next navigation buttons.

Out of frustration :persevere:,

I built my own -webkit-overflow-scrolling: touch; like behaviour. It:

  • Has cross browser support.
  • Works with mouse and touch pointers.
  • Supports a navigation JavaScript API.
  • Has an optional seamless infinite effect.

Enough jibber jabber, take me to the demo :speech_balloon:!

Look for:

{ dragFree: true }

On the demo page here.

Thank you for reading :blush:!
/ David

2 Likes

Hello @kerafyrm02,
Thanks! Of course, it’s a personal taste that we may or may not prefer :+1:.

It’s possible to mix vertical content with horizontal and I think it can make a lot of sense in some cases.

One benefit with horizontal layouts mixed with vertical is clarity. For example, if you have a horizontal carousel with products, as a user it makes sense to make the assumption that the carousel mainly holds products, while continuing to scroll vertically will take you to different content on the site.

Then it’s up to the user if he or she wants to browse the product carousel. If not, you’ve saved some extensive vertical scrolling to reach lower parts of your website.

Thank you for your attention :slightly_smiling_face: .