Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 909
G4bri3l Avatar asked May 12 '12 10:05

G4bri3l


People also ask

How do I resize the scroll bar?

Resize the Horizontal Scroll BarPlace the mouse pointer over the vertical ellipsis (three vertical dots) next to the horizontal scroll bar. The mouse pointer changes to a double-headed arrow. Drag to the right to shrink the horizontal scroll bar or drag to the left to enlarge the scroll bar.

How do I reduce the scrollbar width in HTML?

thin: It is used to set the scrollbar width to a thinner variant of the default scrollbar. Example: HTML.

How do I fix the scrollbar in HTML?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.


2 Answers

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.

like image 57
Johannes Lumpe Avatar answered Oct 08 '22 16:10

Johannes Lumpe


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>
like image 29
Vladimir Starkov Avatar answered Oct 08 '22 18:10

Vladimir Starkov