Member Avatar for drooblez23

Hello,

I'm a new user, but a long time reader (sounds like I'm on a radio show lol) and I just have a question regarding the "page shift problem". For those of you who are not familiar with what the page shift is, it's basically only happens with "centered" templates.

It's when your page is shifted to the left just a couple of pixels because of the vertical scrollbar that is added when there is a lot of content on the page. When there's not a lot of content (and the vertical scrollbar is not needed) then the page looks normal.

However, once a visitor gets browsing some pages will have a lot of content, some will not. So the whole site will sometimes shift to the left just a little bit, and then other times it will not.

Is there a proper fix for this? The guy I hired to do my web design is saying he is just going to make it so the vertical scrollbar always shows up, regardless if there is a little content or a lot of content (which would require the scrollbar). It seems like he is taking the easy way out. Is there some proper way to do this?

Maybe a better way instead of just adding a vertical scrollbar to every page?

Your input is appreciated! :)

Thanks!

  • 3 Contributors
  • 2 Replies
  • 133 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

For a centered layout that visibly «jumps» when the vertical scrollbar appears, a modern, clean fix is to reserve the scrollbar gutter so the available layout width doesn’t change. The CSS property scrollbar-gutter does exactly that and is the least hacky solution for current browsers (MDN: scrollbar-gutter). As noted, forcing a scrollbar is a simple workaround; as hinted, redesigning content (pagination/collapse) is another UX approach. Below are a practical, progressive strategy and fallbacks.

Apply the native solution where it fits (the element that scrolls — often html/body or an inner scroll container):

/* modern browsers: reserve space for the scrollbar so the page doesn't re-center */
body {
  scrollbar-gutter: stable;
}

Because support is not universal, add a small JS fallback that measures the actual scrollbar width and exposes it as a CSS variable you can use to offset your centered wrapper only when needed:

(function () {
  function getScrollbarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
  }
  var sb = getScrollbarWidth();
  document.documentElement.style.setProperty('--scrollbar-width', sb + 'px');
})();

Then use that variable in your wrapper so only pages that need a scrollbar get the extra right padding:

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding-right: var(--scrollbar-width, 0);
  box-sizing: border-box;
}

Notes and testing tips: test on Windows (classic scrollbars), macOS (overlay scrollbars behave differently), and mobile. scrollbar-gutter support status is tracked at Can I use. If users are fine with a permanent scrollbar, overflow-y: scroll is the simplest fallback, but it can look odd on systems with overlay scrollbars. Use the JS fallback only for browsers without scrollbar-gutter, and apply these fixes to whichever element actually scrolls.

Recommended Answers

All 2 Replies

Member Avatar for Kraai

Hi, and welcome to Daniweb.

Personally, when I open a webpage with a scroll bar in the content, I close it without reading it. It is, to me, so retro! But, that is my personal taste and others may not be bothered by it.

I guess, what I am saying, is that I will not use a scroll bar in the content of my site at all, I will rather display a "read more" link, to the next page of the content if the content is too large for a desinated area on the page.

Can you give me a link to your site, or its code?

Member Avatar for ko ko

Try this

html, body {
	height: 100%;
	min-height: 101%;
	overflow: visible;
}

The scrollbar will always show no matter how much content the page has.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.