I am using Side-by-side style of Master/details pattern i.e. both master list and details are visible at the same time then what should be the dynamics and behavior of scroll as per the modern UI designs.

As you know master section can have variable list showing hundred of rows per page or few rows (Consider Pagination, Search and Filters).

For the details section possibly we can have content of fixed height.

Now consider both master and details sections have a large height greater than the height of browser window then what should I do with scroll?

Should I use inline scroll for both sections by fixing the height, width and positions of both panels; like?

enter image description here

Or should I use HTML body scroll with Jump to actions and fixed horizontal position of master panel; like?

enter image description here


1 Answer 1


I believe you should have a dedicated scrollbar for each panel, given that the panel's content is bigger than the height of the panel.

This will let the user navigate through the content. On top of that, you can still use Jump To mechanism to link the sections between the right and left panels.

Regardless of what you do, I would avoid having the horizontal scrollbar encompassing the full windows like you show on the last screenshot.

  • Don't you think multiple scrollbars will confuse the user and can be frustrating because in this scenario he will be struggling to put the cursor in right panel to view the details. Especially, when he is using touch-pad or mouse scroll wheel?
    – hamidraza
    Commented Sep 3, 2018 at 13:24
  • @hamidraza The user should always have control over the application. In this case, it's better to offer them the option to decide on which section to scroll independently, because they might otherwise lose the ability to find what they are looking for specifically.
    – user68158
    Commented Sep 3, 2018 at 13:54
  • @hamidraza : No I don't think it will be frustrating or confusing. This is a very standard pattern. You could style the scrollbar differently like on facebook (the messenger panel). Anyway if there are 2 section of content there are 2 scrollbars and this is OK
    – Leths
    Commented Sep 4, 2018 at 8:22

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.