I am currently implementing a prototype of Lisa Tweedie's answer to my question about having too many checkboxes.

The prototype I am building will look quite similiar to this: enter image description here

Problem: I am working on a 24 inch monitor, so the screen looks like this:


download bmml source – Wireframes created with Balsamiq Mockups

I am designing to fit the lowest resolution of 1024 x 768. If I do so, the mockup becomes (double scrolling problem):


download bmml source

Should I just get rid of the scrolling div and use the window's scroll bar? Is there any benefit to using the scrolling div, if we ignore the issue of double scrolling? Even then, on a large monitor, if the content is long enough such that the window can scroll, the user can scroll the window to a point where the scrolling div's scrollbar will not be fully visible.

Besides being used in very small scrolling divs and light boxes like these, is there any use for scrolling divs on a page?:

enter image description here

enter image description here

  • 3
    One factor worth considering, too, is that on many mobile devices as well as OS X Lion (by default) the scrollbars are hidden entirely except when the user starts scrolling. That might make the existence of a scrollable section easy to miss for users.
    – Kit Grose
    Jul 5, 2012 at 2:42
  • My rule of thumb for scroll bars is to avoid them at all costs. They are necessary for some UI elements, such as dropdown menus, however my tendency is to avoid such elements as they typically involve additional unnecessary steps on the part of the user.
    – zzzzBov
    Jul 5, 2012 at 16:49

4 Answers 4


You want a scrolling div in two cases:

  1. There is content outside of the scrolling div that affects the choices inside it. In this example, if your decision on which boxes to check was influenced by information outside of the scrolling div, it becomes vital that you can see that information as you scroll.

  2. Not every user will interact with the content of the scrolling div. Having the div scrollable allows those users to ignore the content without having to scroll the entire page past it.

If either case is true, use the scrolling div. If neither is, then scroll the entire page.


The reason we use scrolling div , is to keep the window static. So that users can only scroll content without having to move the window everytime.

If your page requires a window movement (because of large contents) then it is better to omit the div scroll since users have to scroll two times. I see this as a bad UX.

Meanwhile, if you can try paging concept of that of Facebook or twitter to load more check boxes in the div itself. It would look appealing also, as per my personal opinion.

  • 1
    But what if the div is incredibly long (as it appears in the OP screenshots). That way every single user has to scroll all the way down the whole webpage to get to the controls at the bottom. Are you saying that one single long scroll is preferable to two smaller contextual ones? Why is this a better user experience than two separate scrollbars?
    – JonW
    Jul 5, 2012 at 7:40
  • 1
    @JonW , what i mean is, if the window has to be kept static then it is advisable to have a scrolling div (scrolling within fixed div). Else , let the div run long enough with its data, because user will have to scroll window anyway.
    – sree
    Jul 5, 2012 at 8:57
  • Ah yes, that's a fair point.
    – JonW
    Jul 5, 2012 at 9:02

Since you have 2 different indicators of the members of your collection (the top listing box and the checkboxes) you can safely let the users scroll the whole page and lose sight of the top listing box. I recommend against using a separate scrolling div in this case.


For accessibility (WCAG 2.0) purposes and also comfort, I would avoid a scrolling div within a page you can scroll down.

Also try it on a mobile, you'll realize how frustrating it is for mobile users to get on a site like this. What you could do is lock the top part (selected roles) using position absolute in CSS and make the rest flow normally.

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.