Horizontal scroll combined with infinite scrolling page

Question

I'm designing blocks of content that scroll left-to-right on a page that uses infinite scrolling. If the user has scrolled through a section all the way to the right, what should happen when they scroll down, and new content loads on the page?

1. The system should return the user to the original left-most position on the page and start additional scrolling sections at their left-most positions
2. Content in the newly-loaded section should load on a similar y-axis to the content above it, let the user scroll back to the left and control their own left-to-right orientation
3. Force the sections that scroll left-to-right to be fixed-width so that the user only scrolls within the viewport (is this possible for responsive?)
4. Combining left-to-right scrolling can't work with infinite vertical scrolling and there's a better pattern for this (would appreciate suggestions)

Answer 1

Given any type of design, there is usually at least one suitable use case, and I suppose this would be no exception.

However, I cannot recall seeing infinite scrolling combined with horizontal-scrolling at section level except in enterprise level applications that have multiple large tables on the same page.

This type of design probably breaks a lot of the best practices when it comes to design, so there are certainly examples but I would say that they provide good user experience.

Without being able to share internal testing results, I would say that overall for this use case it is not suitable, but that's not to say there aren't other uses that might be.

Answer 2

Horizontal scrolling has accessibility problems. Infinite scrolling has accessibility problems. Combined, this could become inaccessible to a lot of people.

However, there are accessibility-minded companies that are using this pattern in specific circumstances. Social media ads have employed carousels for a long time. They're ubiquitous on Facebook, and now Twitter is joining in. Both employ infinite scrolling.

The rules for making this a positive interaction seem to be:

1. Fixed width for the space that contains the carousel/scrolling content. Narrow, not wide.
2. Provide card-based content in the horizontal scrolling section that can be navigated by clicking (on desktop), not dragging on a scrollbar. Make each discrete chunk of information readable without scrolling.
3. Let the user have control over the scrolling experience - don't auto-advance.

Answer 3

Rather than one horizontal scrollbar for the whole page, place each section inside its own horizontal scrolling block.

If you take a look at this UX Collective post on "Best Practices for Horizontal Lists in Mobile, it describes this approach for mobile applications, though the method would also work for desktop browsing.

As the post states...

Horizontal lists work best when you want to display a subset of homogeneous content that’s part of a heterogeneous set.

Here's an excerpted picture the same post that illustrates the approach...