I am creating a UI that will allow users to search. The search results are displayed in a section that is scrollable both horizontally and vertically. This is weird because the web page will end up with 2 scrolls:

  • one of the section
  • one of the webpage

Please share your thoughts on how I can handle this.

  • Are you saying that the results section scrolls both vertically and horizontally, and the webpage itself also scrolls vertically? Jul 14, 2011 at 17:57
  • Thanks for your response. Yes Charles. The search results can be very extensive and so needs to be scrollable vertically and horizontally. It is also to provide a visual cue to the user that they can scroll through the results. Relying only on the webpage's scrollbar for the cue may not be sufficient.
    – Tara
    Jul 14, 2011 at 18:05

3 Answers 3


Horizontal scrollbars should be enough, but try to redesign the search results not to require them.

Most users can use other means for scrolling a page other than just the scorllbars:

  1. mouse wheel,
  2. page up / page down
  3. right side of a laptop pad

These usually do not exist for horizontal scrolling — you will force the user into a suboptimal experience.

If Google can do without horizontal scrolling, maybe so can you? :)

  • I tend to agree with you, Boris, but I have seen plenty of search results, especially in business web applications, where the search results show a lot of columns. For example, an app where you manage product data and the search shows 10-15 columns to help identify (and potentially even edit inline) products or groups of products. A search like that is likely going to need scrolling horizontally. Jul 14, 2011 at 19:14
  • I agree with Boris and Charles. However, if your user has to horizontally scroll back and forth (e.g. to compare tabular data or read prose) this is generally a Bad Thing. As well as being inefficient it is tedious as well. There are many situations when horizontal scrolling is appropriate, but I would recommend checking and rechecking that it is actually needed.
    – Splog
    Jul 14, 2011 at 23:48

Whenever I have been approached with this sort of interface, my response has always been the same - let the browser control the scrolling. Users understand what browser scrollbars are and how they work (both horizontally and vertically). My research and testing has shown that when you have the main content section of a page (the search results in this case) scroll independently of the rest of the content, it confuses more users than it helps.

Contrary to your comment, I believe that the web page's scrollbars are more than enough of a cue that the page scrolls. It is a common interface element that any average web user is going to understand.

EDIT: To make horizontal scrolling more obvious, you can follow the design paradigm that Microsoft has chosen with Windows Phone 7. If it looks like the content is being cut off, the user will understand that there is more to the right and will know to scroll that way to see it. In a typical website design, if your content is wider than the viewing window, you probably don't even have to do anything extra. If you've got a grid of results, with borders and/or alternating row colors, as long as those identifying characteristics go all the way to the edge of the browser window, even if the content happens to cut off (e.g. the current column happens to end right before the edge of the screen), that visual cue will help the user understand that there is more to see.

  • The browser's scrollbars are enough. I also find it very hard to use a website that has both scrollbars on the browser and on some inner DIV. Scrolling DIVs also don't look scrollable on phones and tablets (iOS and Android). You'll confuse those mobile users.
    – JoJo
    Jul 14, 2011 at 18:45
  • True, vertical scroll is intuitive for a web user. How about horizontal scroll?
    – Tara
    Jul 14, 2011 at 18:48
  • 1
    @Tara - While not as common, users in general still understand horizontal scrolling in a browser. I'll update my answer with a little more on how to make sure it's obvious. Jul 14, 2011 at 19:07

I think the horizontal scroll is much easier to apply than the vertical one, as the vertical scroll is a user experience weakness point for any site, i suggest you create a grid to guarantee your page width and stick with it, then scroll horizontally as much as you want.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.