When making a site that doesn't require scrolling, the content is centred. I have placed all page content within a div : #Pagecontent, which has its margins set to auto so that the width of the screen does not matter - the content is always in the centre.
However, when the page requires scrolling because of the length of the content, all of the content on the page shifts slightly. How can I prevent this, as I find it annoying.
Hope this is an okay question. Cheers!
you can show the overflow all time by css overflow:scroll so the page wont move on the scroll bar
The HTML with overflow: scroll will force the page to always show the scrollbar whether it needs it or not.
html{
overflow:scroll;//for both vertical and horizontal
/* overflow-y: scroll; // for only horizontal
overflow-x: scroll; // for only vertical */
}
But there is no way you can prevent scroll bars appearing on any normal site because it is 100% dependent on the visitors screen resolution and/or preference for a maximised window or not.
The only way to prevent scroll bars shifting your page contents is to disable them via javascript, which may make some of your page unreachable by some visitors
Good read: How to prevent scrollbar from repositioning web page?
Related
I have a website consisting of a few pages. Some of them have vertical scroll bars and some of them not. The body on the pages without scrollbar is a bit wider than the on the pages with scrollbar (by the scrollbar's width). Is there any way to set exactly the same width on both type of pages? That small difference in width causes some problems such as the some links in the top manue are in a bit different places. The same is with other elements. I would like to avoid it.
You could make the scrollbar visible on all pages.
When the page is short enough, the scrollbar will have no effect:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Source of that code: Making the main scrollbar always visible
I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.
In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like
overflow-y: scroll;
and if I add
width: 100vw;
It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.
You have couple of solutions:
You can show your scroll permanently and style it accordingly to be a part of your page:
html {
overflow-y: scroll;
}
You can add:
padding-right: 40px;
as 40px is what I have heard is the max scroll size that you can get.
Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.
You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.
You can use media queries to tackle the problem.
I have a header on the top of my web site and links on that. Clicking on the links brings up new pages below.
Some of the pages have a lot of text and others just a small amount. The result is that some pages appear with a scroll bar and others without. It looks very distracting to see the scroll bar appear and then not appear as I move from page to page.
Is there a way I can ensure there is always a vertical scroll bar present?
body {
overflow-y: scroll;
}
Use overflow-y: scroll on whatever element you want to always have a scrollbar
Yes, the CSS rule for this is overflow (also available as -x and -y)
body {
overflow-y: scroll;
}
Other values are for example auto (only when needed, default), hidden and visible.
I'm developing responsive web site for small devices. I need to show popup (pure div) and make possible vertical scroll due large content. But instead scrolling my popup main page scrolled.
My question is how could I disable main page scroll and scroll only popup?
You can set height of your .popup and then set overflow to auto
.popup{
height:50px;
overflow:auto;
}
Now, if your popup has a large contents that doesn't fit in 50 pixels by height and you'll scroll on it, contents in popup will be scrolled instead of whole document contents.
I've got a site with 3 pages, one of which has a scrollbar. When switching between a page without and the page with the scrollbar, the navigation bar changes places, and the transition looks terrible. This is because I have a css/div-based layout, and it centers itself on the window. So, since it will only be covering white space, is there a way to make the scrollbar sit on top of the page, instead of shrinking the page to be next to it?
No, you can't place the scrollbar over the page, but you can force it to be shown on all pages, so there will be no jumps:
html {
overflow-y: scroll;
}