Scrollbar resizing the page

Question

Let's say I have a static webpage and the whole page is wrapped, let's say inside a width of 700px, now if the content of the page is too long then (obviously) a scrollbar appears. BUT the appearance of the scrollbar moves everything to the left of like a few pixels (the ones needed to fit the scrollbar on the right side of the page). What I'd like to do is to remove this "moving" effect, so that if a scrollbar is needed this doesn't affect the content of the page in any way.

I don't know if I made myself clear.

let's say that this is a webpage:

and this is how it looks with the scrollbar:

but I'd like to have something like this:

dots represent whitespace, content represent the webpage content and the column on the right represents the scrollbar.

score 10 · Accepted Answer · edited May 12 '12 at 14:39

10

You can set overflow-y: scroll as rule for your body. This will always display a vertical scrollbar which is disabled unless the content is long enough to be scrolled. This way the content won't shift to the left when its long enough that you can actually scroll and no scripting is needed to make this work.

edited May 12 '12 at 14:39

Vladimir Starkov

17,483
4
56
113

answered May 12 '12 at 10:40

Johannes Lumpe

1,742
13
16

5

This worked properly, I don't wanna be annoying but what if I don't wanna display an empty scrollbar if I don't need a scrollbar at all. The solution you proposed simply keeps a scrollbar: empty if it's not needed or usable if it's needed. I'd like more to have a scrollbar that doesn't move the content or no scrollbar at all. Is it possible without a script ? – G4bri3l May 12 '12 at 11:00
1

As far as I know this cannot be achieved without scripting. – Johannes Lumpe May 12 '12 at 11:01
@G4bri3l i post my answer that provide you will no have scrollbar at all – Vladimir Starkov May 12 '12 at 11:05
Thanks for the answer ;) @matmuchrapna Your answer just let me hide the scrollbar, but that's not what I need. I have a lot of content so I NEED a scrollbar. – G4bri3l May 12 '12 at 11:11
The Google material design do it on their sidebar, I'm trying to work out how it's done. Anyone else know what they're doing? http://www.google.com/design/spec/material-design/introduction.html – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Nov 25 '14 at 16:08
1

For anyone coming across this issue in 2019 there is a more elegant way to accomplish this, and it does not leave a disabled scrollbar when there is nothing to scroll. It is as follows: html { margin-left: calc(100vw - 100%); } – Earle Poole Nov 19 '19 at 22:13

Vladimir Starkov · Answer 2 · 2012-05-12T11:28:31.040

4

if you are not need scrollbar at all, you can use this:

body {
    overflow-y: hidden;
}

UPD. so if you need scrollbar to scroll content, but want to hide it, you can use the following method (demo on dabblet.com):

css:

body {
    overflow: hidden;
}

#fake_body {
    position: absolute;
    left: 0;
    top: 0;
    right: -32px;
    bottom: 0;
    overflow-y: scroll;
}

html:

<div id="fake_body">
    <ul>
        <li>content content content #01</li>
        <li>content content content #02</li>
        <li>content content content #03</li>
        …
        <li>content content content #55</li>
    </ul>
</div>

edited May 12 '12 at 11:28

answered May 12 '12 at 11:04

Vladimir Starkov

17,483
4
56
113

1

He wants to have the scrollbar visible, when there is something to scroll. – Johannes Lumpe May 12 '12 at 11:31
even though this doesnt really answer his question, its still nice :) – Gigala Oct 10 '13 at 13:02
Works very well. I combined it with https://stackoverflow.com/a/13382873/3994485 to get the exact size of the scrollbar and reposition it outside the viewport without changing the dimensions of the viewport. var scrollwidth = "-"+getScrollbarWidth().toString()+"px"; $(".scrollposition").css("right", scrollwidth); – sharpshadow May 12 '16 at 01:50

score 2 · Answer 3 · edited May 23 '17 at 11:55

I had the same problem and only solution using JS/jQuery was enough good for me.

I used link to Detect if a page has a vertical scrollbar? provided before and those links: http://davidwalsh.name/detect-scrollbar-width, http://api.jquery.com/css/#css2, Center a position:fixed element for generating the following code.

css:

body {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    height: 100%;
}

.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JS:

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($(document).height() > $(window).height()) {

        // Create the measurement node
        var scrollDiv = document.createElement("div");
        scrollDiv.className = "scrollbar-measure";
        document.body.appendChild(scrollDiv);
        // Get the scroll bar width
        var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        // Delete the DIV
        document.body.removeChild(scrollDiv);

        // Change margin-left parameter for #container for preventing shift caused by scroll bar
        var current_margin_left_px = $("#container").offset().left;
        var current_margin_left = parseInt(current_margin_left_px, 10);
        var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px";
        $("#container").css("margin-left", changed_margin_left);
    }
});

In case of flexible body width some more code has to be added.

Small correction: if you are going to use slideshows like http://malsup.com/jquery/cycle/ which add a content to you page, but don't display all of it, don't forget to add "display: none" css format to your slideshow div. — Ilya, Dec 08 '12 at 14:28

score 2 · Answer 4 · edited Jun 20 '20 at 09:12

The following is not supported well across browsers, as per MDN docs, however I think you may find it interesting.

overflow-y: overlay;

In browsers that support the property, such as Google Chrome, this will put the scrollbar on top of your content instead of shifting your content over when a scrollbar is needed. You could then add a sufficient amount of padding so that your content is never covered up by it.

It seems this property is not popular, and even browsers that support it now are planning to drop support for it. I don't understand why, because it certainly has its uses.

score 0 · Answer 5 · edited May 23 '17 at 10:30

0

you can check if the screen has a scroll bar. if true than you could margin the content to the right maybe this link will help you : Detect if a page has a vertical scrollbar?

edited May 23 '17 at 10:30

Community

1
1

answered May 12 '12 at 10:38

bassem ala

171
13

Thanks for the answer but I didn't wanna use any sript language for this ;) – G4bri3l May 12 '12 at 10:54

score -1 · Answer 6 · edited Jul 11 '13 at 20:25

overflow-x: hidden;

in the body CSS code, HELPED AlOT! Damn, took me 45mins to surf around for a simplistic answer.

what went wrong? ...I had an with a hover=show image thing going on. I resized all the images correctly; when I refreshed the page, the scrollbar had way to much play room!.....So i put an overflow-x into each and every div tag, (each div tag assigned to individual list item), and nothing happened! solution: The code was correct, but the placement needed to be in the body tag itself. not the individual div tags. Damn.....thankz

Scrollbar resizing the page

6 Answers6