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/
Related
In CSS there are several "modes" to express the intent that the given block/cell size should fit to its content. For example for grid cell it is "auto" or "min-content" (they don't mean the same, I know).
The problem with all those modes are (at least in Firefox) the content is calculated without scrollbar. So when I scroll the content the scrollbar overlaps a bit of the content.
Is there some switch/mode that would reserve the space needed for scrollbar? If this help I am struggling with vertical scrollbar.
Unless I miss something padding is no-go because it would require knowing the size of the scrollbar.
Update:
I am looking for something like:
... style="padding-right: calc(scrollbar-width)" ...
Im no pro myself, but for me it sounds like you could add a margin-right: to the div element, this will make the content move to the left side, which then gives more space on the right for the scrollbar
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'
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.
Dear Overflowing Stackers,
My page is proving to be a real pain the behind. I was experiencing this problem:
background is only as wide as viewport
and I tried to remedy it by putting a min-width on the body. That works just fine; everything displays properly, but only if my min-width has a value high enough to encompass my #navwrapper div (it's the one with the green swirly vector art background).
With such a high value (1265px) many users will be given a horizontal scrollbar, which I don't want. I have a really wide skyline image in the footer (3,000px) and it doesn't cause a scrollbar, so I'm wondering why my navwrapper does. Ideally, I want the page to have a min-width of 960px, so the navwrapper will stay centered, and the edges will get clipped if the edges extend past the viewport.
An early version of my page is here: http://jezenthomas.co.uk/poison2/
Hope someone can figure it out!
Your navwrapper has content in it. Your skyline is just a background image. Browsers treat content with priority and allow backgrounds to just fall outside of the viewport. If you want to prevent scrollbars, you can add
body {
overflow-x:hidden;
}
which will hide any horizontal scrollbars.
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.