Question

I need to create a dropdown, which can contain 100s of options.

I need a scrollbar to appear and be consistent across all browsers.

Google came up empty: Is there a good URL that describes if this is consistent or not?

Answer 1

I would strongly recommend against having a scrollable select with 100s of options for usability reasons.

With exception of one corner case, navigating (both searching in, and selecting from) that list is a really really hard and very annoying to the user.

The UI design reasoning is that it requires:

• Wide mouse gesture (tiring), followed by immediate precise stop (hard to do because of inertia)

• Very difficult to use interface of a scrollbar (extra crap points for scrollbar being in the middle of the page instead of on the right side) – see Jacob Nielsen’s and others’ usual ranting about difficulties of using scrollbars and general evil of anything too long that requires much scrolling.

• Eyes need to scan whole page worth of menu up and down and back, all the time. very tiring.

Here is a set of bad examples

[ the corner case is when all the option names are uniformly distributed across the alphabet (as far as the first letter), which allows somewhat-possible keyboard-only navigation in the drop-down via pressing the first letter of an option ].

A proper UI solution is to have a select whose contents are dynamically populated based on a search field – either typed text (think Google’s new search box, or browser’s address bar) or sometimes checkboxes/radio buttons.

BTW, sub-menu solutions also suck for mouse navigation – minor twitch of the wrist and you lost all of the pointing work.

I apologize that this answer is not an answer to “how do you solve my technical problem”, but I am of a very strong opinin that you’re solving the wrong problem in the first place.

HTH.