5

On a website I'm creating, I have pages that are really short, and so can fit on one screen. I also have pages that are long, so there needs to be a scrollbar. My current styling works off of percentages, which means that on pages with a scrollbar, there is a visible shift as the central block moves to the left when you move from a page with less text to more text (due to the sudden appearance of a scrollbar reducing the width I have to work with).

I'm debating solving this by just forcing the scrollbar to always be on, even when the page is small enough to not need one. This would stop the main block jumping around, but I'm worried that (especially on smaller screens) it reduces the page size and could be annoying to users.

So, my question, which is the lesser of two evils? Forcing a scrollbar to always exist or having a central block that jumps as you navigate pages?

  • 1
    This is a programming question, I think. There is no need to always have a scrollbar. overflow-y: auto; will display the scrollbar if needed. Layout your page so it has a percentage rather than a fixed width to prevent that "move to the left". – Alvaro Nov 27 '16 at 19:52
  • There is too much technical detail in this question for this UX board, and this should be removed. At the bottom of it is an OK question, whether or not unnecessary scrollbars will cause a UX problem. – Tim Grant Nov 27 '16 at 23:49
  • 1
    Sounds like you're asking how to work around a bug. The content should not be shifting due to a scrollbar. – Eric Stoltz Nov 28 '16 at 17:04
  • 1
    It seems that is a bug in Firefox. Here a work around by CSS Tricks: css-tricks.com/forums/topic/… – Trezalves Nov 30 '16 at 8:32
  • 1
    This is the curse of responsive web design - pages that are longer than the viewport require a scrollbar that reduces the overall viewport width but pages that do not require a scroll bar use the full viewport width. Switching between short an long pages causes the layout to jump by roughly half the width of the scrollbar. Unfortunately, because different browsers use different scroll bar widths, it's almost impossible to counter for this although it may be possible to do it using a bit of browser sniffing and some JS to offset all the measurements in the CSS. – Andrew Martin Nov 30 '16 at 15:20
3

Don't force the scrollbar to be visible when it's not needed.

Not only does this add to visual clutter on short screens, it may (if memory serves) degrade the usability of the page for those using screen readers and other assistive technologies. (It's worth checking the stats for your target platforms; assistive technologies covers a lot of possibilities and they're more commonly used than many developers expect.)

Instead of hacking the scrollbar, tweak your layout rules so that things don't jump when you move from screen to screen.

The exact approach depends on your context, but here are some ideas ...

  • Force the scrollbar z-order so that it appears over the top of your right margin, instead of forcing the margin to move.
  • Calculate your layout grid in pixels on page load based on the maximum screen width so that the presence (or not) of the scrollbar makes no difference.
  • Precalculate a fixed set of widths and select one based on the screen size of the device (Bootstrap does this); again you can avoid having percentages that change depending on the presence (or not) of the scrollbar.
  • That's the first I've heard about screen reader scrollbar issues. Having the scrollbar on top of content would make the page look off-center, especially if graphic elements appear near the edge. Calculating screen width probably requires javascript usage and more processing. No one can no for sure the screen size of a device. I'm not sure any of that is worth the effort for a site with only a few pages with the issue. Unfortunately, this is not a programming forum. – Rob Dec 1 '16 at 21:52
  • Having the scrollbar over the top of the page doesn't require it to be above content - many (most!) sites have whitespace margins at the sides; what I'm suggesting is that the scrollbar might be "over" the whitespace, so that presence (or not) of the scrollbar doesn't move things. – Bevan Dec 4 '16 at 22:42
  • I'm aware of that but that means the content with the scroll bar is covering up that 8px or so and thus slightly off centering the page. – Rob Dec 5 '16 at 4:25
1

I've run into the same problem, and find the "jumping" VERY annoying.

This trick: HTML { overflow: -moz-scrollbars-vertical; }, from https://css-tricks.com/forums/topic/remove-page-shift-in-ff-due-to-scrollbar/, suggested by Trezalves in a comment above, appears to solve it for Firefox. It keeps a scrollbar in place at all times, but without the Thumb and with the end buttons disabled.

Everyone has some problem ignoring distractions because the ability to attend quickly to movement at the edge of the visual field can be the difference between life and death. But for a large minority of people, they cannot ignore movement even when they know what it is. So for them, keeping the screen quiet can be a non-trivial benefit.

  • This only works in Firefox and no other browser. – Rob Dec 1 '16 at 21:30
  • That's true, but FF is popular, and that's a very cheap and clean way to solve the problem for FF users. The solution of keeping a scrollbar in place, albeit not with that particular CSS, is probably the least-tricky way of solving the twitching problem for the general case. – MMacD Dec 2 '16 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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