4

I have noticed on certain websites that are implemented as a single page and free scrolling view in browsers that when you trigger a pop-up or modal window a second scrollbar appears to allow the user to scroll through the content of the window. The primary scrollbar is also active but not very effective since the pop-up or modal window blocks out most of the screen.

I cannot imagine that this implementation approach would have very strong usability reasons, so I was wondering if there is a valid technical reason or constraint. But if there is a valid argument from a UX design perspective then I am also interested in finding out the rationale behind it.

enter image description here

And I also noticed this on the Medium website when you are viewing the people that follow you. Very surprised since I think a website like this would follow the best UX/UI practices...

enter image description here

Improve this question
2
  • I suspect that this is a "feature" and not what the user or the designer want.
    – Steve Jones
    Mar 10, 2015 at 12:34
  • This is almost always a bug.
    – Harshal
    May 19, 2015 at 12:36

2 Answers 2

Reset to default
2

This is not a "feature", it's bad (or unfortunate) design, and there are two reasons for it, and one it technical:

  • The height of either content in the modal or the content of the page is higher than the designer anticipated.
  • The technical cost of setting a proper height of the modal was considered too high (and in unfortunate circumstances near impossible).

The double scrollbar happens when both the content of the modal and the content of the page has a height higher than their respective containers, and the modals container spans 100% of the page width (thus rendering the second modals scrollbar next to the scrollbar of the page). The reason modal is often contained within an invisible container to prevent the user from clicking things "under" the modal.

There are several factors that make the situation technically complicated:

  • You often don't have full control of the content.
  • You never fully control how the content will render for the user (screen size and font rendering for example).
  • On top of this, height is often a tricky dimension to control in the browser.

If you are not familiar with web technologies, HTML and CSS (the two core languages for controlling markup and layout) have rather poor support for controlling height in many situations. Going into details here will probably become too technical though.

Improve this answer
2
  • +1 Is there better support in HTML5 and CSS3 for height control now? I still see this around enough to wonder how much things have changed...
    – Michael Lai ♦
    Jun 15, 2017 at 6:09
  • A lot has happened in this area, yes. You can use the vh unit (view height), and together with the CSS calc function this can solve many situations (height: calc(100vh - 200px). You can also use flexbox and possibly CSS grid layout. When to use what and how to degrade gracefully depends, but handling height in CSS has definitely improved a lot.
    – Josef Engelfrost
    Jun 16, 2017 at 19:21
1

From a UX perspective I can say that it can help users browse long sub-content pages while keeping the original position in the main page.

For example sometimes there is the demand to have the main page as a one-page layout. This could be a very content rich / long page – but still you'll also have content rich / long sub-pages. Opening a sub-page in a modal window you might prefer to browse only that sub-page and keep the main page at the position where you left it.

Technically both approaches would be possible – so I would assume this is mostly a question of ux preferences over technical issues.

Improve this answer
2
  • 1
    Is there a particular reason why the user would need to scroll along the main page while the view is focused on the sub-content pages?
    – Michael Lai ♦
    Mar 10, 2015 at 22:44
  • no – and i must admit I only thought about hiding the 'inner' scollbar. So actually there is a technical issue with that – a.f.a.i.k. the 'outer' scrollbar will just stay visible anyways.
    – tillinberlin
    Mar 10, 2015 at 23:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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