Scrollbar resizing the page

2018-06-27 02:41:43

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.

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.

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>

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.

链接地址: http://www.djcxy.com/p/75800.html

上一篇: img的行为像一个背景img？

下一篇: 滚动条调整页面大小