Is it a bad idea to have a scrollable element within a scrollable element? I sometimes feel it tricky because, when I scroll with the mouse or keys, the element that I didn't intend sometimes scrolls.

If it is a bad idea, it there an alternative way to deal with in such cases?

  • 2
    If you see issues with the interaction yourself, without any user testing, it really is a bad interaction.
    – dnbrv
    Mar 28, 2012 at 23:21
  • @dnbrv My experience is with things that are out there, not that I made it.
    – sawa
    Mar 29, 2012 at 1:05
  • 1
    If you, as a user, and you see something that doesn't feel right, it must be not right. Workflows might not suit everyone because they are tied to mental models but convoluted interactions are bad universally.
    – dnbrv
    Mar 29, 2012 at 2:14
  • Can you give an actual example, how does this look like? Mar 29, 2012 at 2:51

2 Answers 2


A scrollable element within another scrollable element doesn't automatically disqualify a design. The textbox in which I'm typing this is a scrollable element within the scrollable question page on UX.SE, and that's fine. The Facebook ticker (top right) is a scrollable component within the scrollable FB page. Most widget-based webpages display this behavior as well, unless they've turned it into a webapp, like Gmail - where each area is scrollable but the page itself isn't.

But it needs to be carefully designed. It should employ on-demand scroll bars, which help the user know which element is currently attached to the mouse wheel / arrows, and the detailed interaction should be well thought through.

The one case where it's especially difficult is designing for touch screen. Since there is no hover on touch screens, you can't implement on-demand scroll bars, and if you open such a page on an iPad and swipe within the internal element, it won't know which of the elements you meant to scroll.


This sounds like an obvious bug to me, my hunch is that it's a browser issue. But yes scrollable elements are a big no-no. It's hard to answer this without an example but there are several ways you could overcome this, e.g. expanding the window area of one element or the other, possibly separating the two elements out. Again, an example would help here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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