So i have come up with a UI design for a dashboard, that is constructed like the following:

the dashboard has a scroll activated depending on the the total height of the added boxes, the issue here is that these boxes are resizable therefore the these boxes also have scrolls (depending on the content). So sometimes when the users intended to scroll the down to see the boxes in the dashboard, they scrolling down within the content boxes instead. Currently there are 20px margin between the boxes, but it still seems to be annoying for the user to try to target these spaces when wanting to scroll within the dashboard.

So pretty much, it results in shitty experience. Not sure how if there any best practices for handling these situations for the dashboard, but any tips or links to other pages that have solved this issue are appreciated.


To visualize the idea, what i am trying to achieve is something like https://tweetdeck.twitter.com but the boxes are stacked vertically instead of horizontally.

The reason i am not going with the horizontal design, is because horizontal scrolling does not come naturally and also its easier to scan content vertically. I like the horizontal design on the mobiles, but not that much on the desktop devices... I am open to any solutions.

EDIT2: I was thinking to let the user hold shift button while scrolling to make sure its the parent scrollbar that scrolls (I would add it as a pro tip somewhere visible for the user). as for mobile, i would apply the horizontal design, what do you guys think?

  • 2
    can you post a mock of your current efforts and the amount of data on the screen?
    – Mike M
    Nov 18, 2018 at 3:03
  • How about paginating the content inside the boxes, instead of making them scrollable? Nov 18, 2018 at 15:40
  • @MikeM Just edited the question, I hope that the visualiztion is clear now :).
    – pabloBar
    Nov 20, 2018 at 17:42
  • @andregoiano that is a possible solution, but it would slower the interaction abit...
    – pabloBar
    Nov 20, 2018 at 17:43

3 Answers 3


Using User Action Driven Scroll Might Help

If I have understood correctly, you have a global scroll (applied to the complete page) and another scroll inside a particular card. Now, while scrolling vertically, the nested-scroll is causing the irritation, because the behavior is going against the user's intended action/mental model.

An approach which you can try is this:

State 1:

![enter image description here

Instead of showing a scroll by default, you enable it only if the user clicks on a "View More/Load More" button.

State 2: As soon as the user clicks on the view more/load more button, the scroll is activated

enter image description here

Now, it can be active till the time user clicks somewhere outside the box or clicks on any of the other boxes.

State 3: As soon as the user clicks on any of the other boxes, the local scroll of the card will be activated and the scroll of the previous box will be gone:

enter image description here

If the user clicks anywhere else, and not inside any of the cards, you go back to state 1, and now the global scroll can be used to scroll the dashboard. The global scroll also is applicable if the user's mouse is not positioned inside the box which has a local scroll.

  • 3
    Or just make it possible to scroll with some modifier key as an option, i.e. -scrolling- panning inside the boxes with Shift pressed or something like this. It will save some vertical space but still might need some explanation though. Dec 21, 2018 at 8:52

Nested scrolling pretty much always results in bad UX. I'd recommend making the boxes take up their full height. You could allow the user to add sidebars, but make sure only one scroll bar affects any given area. Also, horizontal scroll is probably also a bad idea. (I'd only recommend using it for content that cannot be wrapped or resized such as code.)

  • Using the full height would not work as the content would take alot of space, on the other hand pagination of the content would work, but i feel that it makes the process slower when scaning content... I would probably take that as the last solution.
    – pabloBar
    Nov 20, 2018 at 17:52
  • What sort of content is it? Does it need to be displayed directly on the dashboard? Nov 20, 2018 at 18:56

As the shift key solution might be a way to go with your problem, without any hint to the user they won't know about it, hence they are not likely to use it.

Another solution occurred to me as considerably intuitive and not requiring much guessing from the user.

  • the whole page vertical scroll is the default action on your form
  • once the user holds mouse pointer within a box for a certain period of time (say 1 second), this box becomes active (and gets a highlight or some other visual hint) and the scroll action is now exclusive to the box
  • the box loses focus and thus the scroll action (and the whole page gets focus and scroll action) if the mouse pointer is moved by certain amount of pixels (as if the user has shaken the box off) or if the mouse pointer gets outside the box

The time required to trigger the box has to be chosen experimentally, I'd say, 1 second is a good starting point in my opinion.

  • 1
    Combine it with the possibility to click, like Chandans answer. Otherwise, a second can be a long time if you intend to scroll immediately. Also it makes it a bit more accessible for people who rely on a keyboard instead of mouse.
    – jazZRo
    Dec 21, 2018 at 11:05

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.