CODEWITHSUNDEEP
htmlcsswebscrollbar
G4bri3l
G4bri3l

Reputation: 5146

Scrollbar resizing the page

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:

| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |

and this is how it looks with the scrollbar:

| .....contentcontent .......... | |
| .....contentcontent .......... | |
| .....contentcontent .......... | |
| .....contentcontent .......... | |
|......contentcontent .......... | |
| .....contentcontent .......... | |
| .....contentcontent .......... | |

but I'd like to have something like this:

| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |

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

Upvotes: 16

Views: 32315

Answers (6)

Kyle Zimmer
Kyle Zimmer

Reputation: 310

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.

Upvotes: 4

Ilya
Ilya

Reputation: 121

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.

Upvotes: 2

dondre
dondre

Reputation: 29

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

Upvotes: -1

Johannes Lumpe
Johannes Lumpe

Reputation: 1762

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.

Upvotes: 11

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

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>

Upvotes: 4

bassem ala
bassem ala

Reputation: 191

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?

Upvotes: 0

Related Questions