I noticed that when I have an element with a horizontal scrollbar, Chrome will add a scrollbar within the element without changing the height, but Firefox will increase the element height to make room for the scrollbar. Any way to control this behavior in either case?
Related
In Windows, when the scrollbar is visible it changes the width of the website and makes it appear to 'jump', yet in Mac OSX the scrollbar simply hovers over the website and doesn't change any sizing.
Is there any way to force the scrollbar in Windows to act the same?
I don't believe you can cause the scrollbar to overlay the site, but you can force it to always be visible by setting (demo):
body{
overflow-y:scroll;
}
This is on the assumption it is your body element that requires scrolling, alternatively simply set it on the element representing the scrollable viewport.
More on overflow-y from MDN
The overflow-y CSS property specifies whether to clip content, render
a scroll bar, or display overflow content of a block-level element,
when it overflows at the top and bottom edges.
scroll
The content is clipped and desktop browsers use scrollbars,
whether or not any content is clipped. This avoids any problem with
scrollbars appearing and disappearing in a dynamic environment.
Printers may print overflowing content.
Live Site
I have a site using jmpress, and I'm having a hard time getting scrolling on my content. I'm able to scroll in Chrome by simply selecting text on the page and dragging down, but I'd like to achieve this in all browsers with native scroll, perhaps emulated by javascript. I've checked a number of plugins to do this like jScrollpane and tinyScrollbar, but none of them will work without a height set and overflow-y set to scroll. The second problem: even when I set the overflow-y to scroll, scrolling does not occur with the mousewheel.
Try this in the console: $(".step").jScrollPane();. Nothing happens. Set each step to have a height of 800px and overflow-y scroll, and scrolling works, but still this is only relative to the height of the window. I need some way of calculating the size of the surrounding elements (relatively positioned) so that the height can be calculated when the user resizes the screen.
So is it possible to achieve scrolling on an absolutely positioned element (slide) and keep the height as auto using jmpress?
You could use the window resize event of jquery to set your height dynamically after you set the height you could call the update method of tinyscrollbar to update the scrollbar.
I'm trying to create a page with a long strip of images, where the height of the strip is set to a percentage of the height of the browser window, and the images are scaled to 100% of the height of the strip. I also want to be able to overlay text on top of the images. I've got as far as this:
http://jsfiddle.net/bX8Cb/
But it doesn't behave as expected. The div.news-item elements should shrink to fit the contained img elements. This happens in Chrome/Safari, but when the window is resized the .news-item elements retain their original width rather than adjusting it to fit the resized images. (But if I then inspect the element in the Chrome developer tools it redraws the divs as desired.)
In Firefox the .news-item elements are given the full width of the un-resized image, although the image itself is resized.
What's happening here? Am I doing something wrong or is it a browser bug or something? I've been looking at the CSS specification for the width property and it seems like what I've done ought to work.
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.
What is the status on overflow-x and overflow-y? Whenever I give overflow a value, and inspect that element, the browsers tend to split this into overflow-x and overflow-y. However, trying to explicitly state this gives nothing.
For example, on my math class page: http:math.davehampson.net the grades tab is very wide, and I want it to scroll within the <div> There is no height declared, so it stretches down, and I get a horizontal scroll bar.
By problem is that I also get an unneeded vertical scroll bar. If I change overflow:scroll to overflow-x:scroll, then nothing happens. The table is displayed in full width, and the entire page scrolls. Which, because the body is black, does not show up.
Is there a way for me to eliminate this inactive vertical scroll bar?
Thanks, Dave
overflow:auto only adds a scroll bar when the content within it exceeds the allocated space.
So if you only need a horizontal scroll, make sure the height of the content is less than the height of the enclosing div, if that makes sense.