In Firefox and Safari, pages that are centered move a few pixels when the page is long enough for the scrollbar to appear. If you navigate through a site that has long and short pages, the page seems to "jump" around.
IE7 tends to leave the scroll bar visible all of the time but disables it when the page is not long enough. Since the width of the HTML window never changes the centering of the page doesn't change.
Is there a workaround or a way to style the page so it doesn't jump around in Firefox and Safari?
Thanks.
You could simply always enable the scrollbar:
html{
overflow: scroll;
}
but that would give you the horizontal scrollbar too, this is better:
html{
overflow-y:scroll;
overflow-x:auto;
}
That will give you only the vertical scroll and the horizontal when needed.
This site contains a javascript to fix the problem which is a better solution IMO than the current one (a permanent scrollbar):
http://www.johnpezzetti.com/2011/01/31/removing-vertical-scrollbar-jump-shift-problem-a-javascript-fix-for-all-browsers
This script waits until the DOM is loaded then checks to see if a scrollbar is active. If it is, it calculates the width of the scrollbar and sets the body’s marginLeft equal to that width. This offsets the shift, and since it runs on DOM load it takes instant effect.
Related
I'm building a web application and testing with Google Chrome. I have a sidebar element where, if I hover over that element, I want to disable scrolling for the body element.
I achieved this by setting overflow: hidden on the body tag using CSS whenever a user hovers over the sidebar. I tested this on a browser without a USB mouse plugged in, and it worked great:
Sidebar Closed (body scrollbar visible)
Sidebar Open - Bad (body scrollbar still visible, producing an ugly overlap)
Sidebar Open - Good (my fix: hiding body scrollbar, so that sidebar scrollbar displays alone)
This works because Google Chrome doesn't render scrollbars as actual elements (that have widths). However, when I plug in my USB mouse, the scrollbars now do have widths. And thus, when I move my mouse from outside the scrollbar to inside the scrollbar, the width suddenly changes:
Before Hover (body scrollbar visible)
After Hover - Bad (body scrollbar hidden, suddenly decreasing the width of the whole sidebar)
This produces a really ugly and glitchy visual effect, where the widths of elements change when you hover over them. I've looked everywhere for a solution to this... any help would be much appreciated! Thanks so much!
If you are on a mac, chances are your OS is adding the scroll bar when you plug in the mouse, a scroll bar that will override most CSS selectors.
There is not a way to override this with CSS that I am aware of. If you change your system preferences you will find your website behaving the way you intended.
System Preferences -> General -> Show Scroll Bars -> Change from [ALWAYS] to [WHEN SCROLLING]
.MY_CSS_CLASS::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent;
}
This fixed my issue with ugly scrollbar being displayed when mouse is connected.
Specifying width to the body element will keep content width constant.
Here is the working example: https://jsfiddle.net/fuhacLtn/2/
First, you should pay attention to the rendering with other browsers and with chrome windows. As you know, the windows scroll bar is clearly not the same and is not rendered in the same way. You might have surprises with this.
Otherwise you maybe should pay attention to jQuery custom content scroller plugins.
This could actually helps you a bit more to control the scroll & the overflow and customize the scroll bar depending on the render you would like to give to it.
Good Luck'
http://www.andrewsmorris.co.uk/blog/
I have a sidebar that slides out when you click the button on the left, the problem however, is that on iOS I get horizontal scroll bars on the page when I click it.
Which I don't when I click it on a desktop browser, because it adds a class with overflow:hidden to the body class.
In theory this should prevent the same unwanted horizontal scrolling on the iPhone too, but it doesn't for reasons i cannot work out.
I could apply overflow-x:hidden to the html element, but that seems to jump the page to the top regardless of where you are, which is unwanted behaviour.
You need to apply overflow:hidden; and position:relative; to both and and they also can't be display:table, display:block works. Specifying the height and width may help as well.
I don't know a solution that will enable you to use overflow: hidden; based on the information you are giving. I can however advise you to use iScroll for mobile scrolling!
Take a look at it on cubiq's website
I really like the lionbars widget, but there are a few things that aren't working out. I've dug into all these issues locally, so I thought I would ask if there's known ways to work this, before I start re-arranging the code.
horizontal scrolling is not working (vertical is)
scrollpane (and corresponding scrollbars) is not resized on window resize
there's a weird discoloration on the right side of the vertical bar if the window is zoomed out too high
can I control scrollbar width ; the default vertical scrollbar is too narrow
To answer your issues in order:
Horizontal scroll: Your code is loaded on JSFiddle, but you've set LionBars on the wrong div. Just set the LionBar function on #parent instead of #child and horizontal scroll should work: http://jsfiddle.net/3XPNk/8/
However, I've found that the horizontal scroll will not work in Webkit browsers (Chrome and Safari) on my Mac due to an issue with how the browsers treat horizontal scrollbars and how the LionBars script itself detects a horizontal scrollbar. You may want to contact the developer about this.
Scrollpane not resizing: Not sure what you mean. Please elaborate? You've defined #parent and #child as fixed pixel sizes, so they will obviously not resize. Try percentages if you want it to resize fluidly.
"Weird discoloration": This is because the script actually just offsets the real scrollbars beyond the viewable area of the scrolling div by a pixel amount. Once you zoom out, this breaks because the scrollbar width changes proportionally with zoom and the offset amount becomes too small to squeeze out all of the scrollbars. That weird discoloration you see is a bit of the scrollbar squeezing back into view. Again, you probably want to tell the developer about this.
Changing scrollbar width: Yup! Just edit the values for .vertical and .horizontal in lionbars.css.
Fixing issues 1 & 3 above will require some fiddling around with the script. This is not exactly the same (there is no nifty fade and you will have to style it significantly on your own), but you may want to consider using this plugin instead, as it seems to be more developed and compatible overall: http://jscrollpane.kelvinluck.com/
I'm encountering something I've never really come across before in IE7. I have a wrapper div with a background image applied to it. This image is supposed to repeat all the way until the end of the wrapper div. In IE7 there seems to be a scrolling issue where if I use the scroll bar to see parts of the page that aren't initially visible, the background image will 'cut off' and not repeat in the last 100px or so. This only happens if I have to scroll to see more content. It's like it doesn't fully load the background image for areas that aren't immediately visible.
What's strange is that if I use the mouse wheel to scroll up and down the page, the background image repeats just fine and as it should. If I use the scroll bar though, it will break randomly (never more than 100px but sometimes just the last 20px, 30, 40 etc).
I've tried the following to trouble shoot so far:
1) Added background color to the div as well. The background color breaks as well so it's not just a background image repeating issue.
2) Added a min-height of 1% to the wrapper div.
3) Added a position: relative to the div. I read somewhere that this fixes a weird IE7 background bug. This didn't help.
Thanks for any help. I'm unsure if there's some hiccup somewhere else in my code that is causing this (which I'll continue to look into) or if it's some well known IE7 issue. Again I just find it odd that using the scroll wheel on a mouse let's the background render as it should. Clicking, holding, and using the scroll bar causes it to break.
EDIT: Here is a link to a screenshot of the horrific problem in action. http://skitch.com/flight/dspeh/ie7bgerror
The top one is with the error. The bottom screen is how it should load.
Another additional thing I noticed: If I minimize the window while it has the broken background and then maximize it again the background image corrects itself.
My guess is that the 3 boxes at the bottom are floating div's. Try this:
#backgroundDiv { overflow:hidden; min-height:100%; height:auto!IMPORTANT; height:100%; }
IE6/7 sometimes bug with min-height. This piece of code will cause IE6/7 to default to 100%... IE sometimes likes to use the last declaration instead of following the !important call; whereas every other browser will use the !important call when displaying the page.
I have a site which needs to be fully self-contained in the browser window, ie, the user must not have to scroll up and down to view different parts of the site. Content that is too long to fit into the content pane is handled with overflow:auto, which is working fine.
the problem is, no matter what I try I still have the following problem:
two sets of scrollbars http://www.wikiforall.net/bad_scrollbars.png
So beneaht the content which successfully fills the browser window, there seems to be a gap. This gap causes the vertical scrollbar to show itself (and there appears to be a similar gap on the right side which isn't as easy to see). I've inspected the elements using Chrome's element inspector and the <html> tag covers only up to that gap. So I have no idea where the gap is coming from.
The main page divs are setup with position: absolute, with left, right, top, and bottom all set to zero. These divs also have display: inline set, and do not have margins or padding. The html and body tags are styled the same way.
I've been looking around for a day or two but nothing I've found has worked. Does anyone know how to remove these scrollbars?
You can always use:
overflow: hidden;
To hide the scrollbars.