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'
Related
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 have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:
I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to
trigger the vertical scroll.
In other words, the user has to scroll horizontally to make the container scroll vertically.
again it is random, some times it just works.
I already have check all the relative positions for the child elements within the scroll.
any thoughts ?
I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.
the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.
cheers
Ran into the same problem, been struggling with it forever until I did this:
Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.
I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:
$(window).height($(window).height());
I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!
As stated in the comments by Graygilmore. This worked for me:
// NOTE 2019-04-09: [referenced link was removed]
Make sure no parent element of the scrollable area is visibility:hidden or display:none.
I cannot scroll to the bottom of a web page I am working on. My <body> is styled with overflow: auto (which I believe is just normal web page default behavior). My content is narrow and tall so a vertical scroll bar is necessary. However, when I scroll as far as the scrollbar will let me, the bottom approx 40px of my content is clipped out of the viewport and there's no way to scroll any farther. A screenshot is below (the black is just my desktop background). The box in the bottom right corner is the scroll bar itself, but there's no down arrow below if for some reason and it won't go any further. The rounded rectangle on the left is the top bit of a cancel button that is clipped. This problem occurs on a WebKit based browser on Windows, but does not happen on the Mac.
Here's my CSS situation: <body> has overflow auto and 0 padding 0 margin.
overflow: visible is the browsers default. I had to see more of your css to be able to help you, but, either way, try setting overflow to visible.
Though, I dont really think it will solve the issue. With overflow auto you should get a vertical scrollbar when the contents height is greater than the containing blocks height. That's not your case.
i had problem like this before, I removed position: fixed on my header and its worked. Hope that help someone
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/
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.