On pretty much any web browsers, the scroll bar is displayed only when it is needed. This is fine, but the problem is that when the scroll bar is displayed, the width of the screen shrinks. This results in an awkward shift of the content on the screen.
I want to prevent this behaviour so that the width of the screen is consistent whether the scroll bar is displayed or not displayed. How can I achieve this? I don't want to use JavaScript/jQuery if possible.
Try jQuery "perfect scroll" plugin here is: http://noraesae.github.io/perfect-scrollbar/
Set the vertical scroll bar on the page like this with css,
html
{
overflow-y: scroll;
}
this will place the scroll bar in the window and it will stop the screen from jumping when it is needed.
cheers
Related
I'm searching a way to prevent your whole body layout to resize when a scroll bar appears to the right.
I want my body to stay at the exact same position when you switch from one html file to another, but the second one contains more content than the other, so it creates a scroll bar to the right of your browser.
The scroll bar makes my body move a tad bit to the left because it's centered. How can I prevent this using only html and css? (no scripts)
body {
overflow-y: scroll;
}
That will force the scrollbar container to be always visible, even when there's no scrollbar, keeping your content centered.
Here's what I have: 1000px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com/scroll
When I resize the browser window (anything less than 1000px should generate a horizontal scroll bar, right?), the scroll bar doesn't come up, as you can see in the image below.
What should I do to make the scrolling bar appear? (Nevermind the slideshow, I'm still working on it.)
JSFiddle: http://jsfiddle.net/vBjeg (Not every image is working, but I believe the most important here is the CSS.)
I appreciate all your thoughts!
Remove overflow: hidden from .row
I am developing an e-commerce app for ipad both in landscape and portrait orientation. The main content div in the middle of the layout will have all the products displayed side by side. I have written media queries for both landscape and portrait. They are working fine, but I am getting a vertical scroll bar because of the content div (I think). I want to avoid the vertical scroll scroll bar completely.
top left: logo
next div: title
next div: products----I think the problem is with this div only.
nextdiv: footer
I can't send the picture because I have less than 10 reputations.
Can anybody help me with this issue?
You can try this
html{overflow-y: hidden;} if you want scrollbar disabled for your html.
There is a cross browser dilemma especially now that safari uses an internal scroll mechanism that floats on top.
When a div with fixed height's content ends up getting larger than the div we need a scroll bar, but the scrollbar takes out some width and thus a horizontal bar is added to. How do we prevent a horizontal scroll even if the content is to wide I want no ability for the user to be able to scroll horizontally.
The CSS3 property overflow-x:hidden, still allows the user to scroll left and right with a trackpad. I want it disabled completely, or a solution that removes the problem of the vertical scroll bar taking width from the div.
Any ideas?
Marvellous
One solution is that you make the vertical scroll bar always display:
overflow-y: scroll
But still the scroll bar's width doesn't stay the same across browsers.
Or you can make a custom scroll bar replacement with div/CSS/JavaScript. Here is a jQuery plugin which seems promising:
http://jscrollpane.kelvinluck.com/
Set the image as background should fix your issues
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.