0

Whenever I have content that expands the page height, a scrollbar appears on my rendered website. However, the scrollbar pushes my content to the left by the width of the scroll bar so when I navigate to a page where the height is less then the page height, there's a noticeable jump as the page width resizes. Is it possible to have the scrollbar sit on top of all my html content? Similar to how scrolling works in Chrome on iOS.

Ideally a css property like overflow:absolute where the scrollbar appears and the content isn't clipped would be the best but I know that doesn't exist.

EDIT: In the image below, you can see that the scrollbar has a white background and has pushed my html content to the left. What I want is the html content to be underneath the scrollbar, as if the scrollbar had absolute positioning to the right.

enter image description here

I conferred with one of my colleagues who's running the same version of chrome as I am and his scrollbar does exactly what I want. Maybe AB testing on Google's part?

barndog
  • 6,975
  • 8
  • 53
  • 105
  • What's wrong with `overflow-y:scroll`? – Mr Lister Jul 06 '15 at 18:20
  • I added a picture to my post. The scrollbar has a white background and what I want is for the blue background to be underneath the scrollbar, not pushed to the left. – barndog Jul 06 '15 at 18:22
  • Create a demo of your current output. – m4n0 Jul 06 '15 at 18:23
  • Current output? How do you mean – barndog Jul 06 '15 at 18:24
  • Why not add padding to push the scrollbar? – Waxi Jul 06 '15 at 18:32
  • use: http://www.jsfiddle.net – user2072826 Jul 06 '15 at 18:32
  • What element would I be adding padding to? The html? I assume it'd be something like: `padding-right;-10px` – barndog Jul 06 '15 at 18:32
  • @BuzzotheSplitter I did try that and it unfortunately didn't work. Even if it did, the issue then becomes not being able to grab the width of the scrollbar to use as the negative padding. – barndog Jul 06 '15 at 18:34
  • Perhaps you didn't write the CSS properly, and the width of the scrollbar is pretty standard at 17 pixels. – Waxi Jul 06 '15 at 18:35
  • I wish but I successfully validated the CSS using WWW's validation service. I'm using SASS too because it's objectively better. Even still, doing `margin-right:-17px' or `padding-right` on either the `html` or `body` element has no effect. – barndog Jul 06 '15 at 18:37
  • If part of your goal is to center things, [Ayke van Laethem suggests](https://aykevl.nl/2014/09/fix-jumping-scrollbar) a margin-left of `calc(100vw - 100%);`, but that won't style your scrollbars. – Ulrich Schwarz Jul 06 '15 at 18:37
  • @UlrichSchwarz unfortunately that didn't work either, thanks though. – barndog Jul 06 '15 at 18:39
  • @UlrichSchwarz check out my most recent edit. – barndog Jul 06 '15 at 18:46

3 Answers3

1

There is no reliable cross-browser way to do what you're looking for.

Different browsers handle the scrollbar differently -- some (including Safari and some versions of Chrome) already do exactly what you want, most others enforce a particular background-color and width for the scrollbar (not always the same width) and push the content over to make room. Any negative-margin or width-greater-than-100% trickery will either not work at all or will put some of your content underneath a non-transparent scrollbar in many browsers (and offscreen in others).

If the 'jump' when the scrollbar appears is too distracting, you can force the scrollbar to always be present with overflow-y:scroll.

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • Yeah it seems to be a tricky solution, however what's boggling my mind the most is that the people I work with are not having that issue. Same version of Google Chrome, exact same code base, everything. That's what's so confusing to me. – barndog Jul 06 '15 at 18:55
  • 1
    If you're on OSX as it appears from your screenshot, the difference may be due to the OS version rather than the browser. The upshot is that you can't depend on a specific width or styling for the scrollbar, and browser makers appear willing to change them without warning -- so it's not a great idea to build code into your site that depends on a specific scrollbar type. – Daniel Beck Jul 06 '15 at 19:01
  • Haha yeah it's like saying the navigation bar in ios, 64 pixels is "standard". Maybe it is the OSX version, who knows – barndog Jul 06 '15 at 19:02
  • (sorry about the stealth edit, I accidentally hit 'return' early :/) – Daniel Beck Jul 06 '15 at 19:04
  • No worries! I totally agree, you should be as generic as possible when doing this sort of thing. I consider myself to be a pretty advanced web developer too so this sort of minuscule issue tends to be pretty frustrating. Plus I just think having an overlay scrollbar is being UX, looks way nicer. – barndog Jul 06 '15 at 19:05
  • 1
    hm, well... new trend is new trend, I guess. Personally I think the overlay style is mildly prettier but not worth the accessibility problems it causes. but that and a nickel will buy me five cents – Daniel Beck Jul 06 '15 at 19:43
0

Native scrollbar styling is limited, but here is a demo of how to do it:

body::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; }

http://codepen.io/zakkain/pen/phjBC

Chrome and IE respond to it very well. Firefox not so much, the issue is logged here https://bugzilla.mozilla.org/show_bug.cgi?id=77790 and is stale.

If you want firefox, you'll have to go with a custom scrollbar replacer.

And how to compensate for scrollbar is explained here: How to compensate for Vertical Scrollbar when it is not yet present

It works well, but most code pens can't show it, so you'll have to experiment on your own.

This is the OSX disappearing scrollbar issue (not sure if it's relevant for modern versions of OSX): CSS - Overflow: Scroll; - Always show vertical scroll bar?

Community
  • 1
  • 1
Nomenator
  • 1,021
  • 1
  • 13
  • 28
0

As it would turn out, all I had to do was update my version of OSX...baffling. I'll accept @DanielBeck's answer because it's a reasonable answer to a coding question whereas here, the solution was to arbitrary update my laptop software.

barndog
  • 6,975
  • 8
  • 53
  • 105