I have a simple animation (via CSS) which brings my content from the bottom of the screen to the top. Margins are set to auto. My problem is that when this animation is coming up,on the right side it appears a scrollbar which persist till the end of the animation. I want to disable this scrollbar till the end of animation because my elements moves to the right for a few pixels after scrollbar disappers (because my margins are set to auto – and i want them to be so).
Thanks for any info!
set body{overflow:hidden;} before the animation and remove it after the animation ends.
Related
I want to disable vertical scrolling, For this slideshow project I'm making. But when I set overflow-y to hidden all (x, y) scrolling stops. How do I fix it? I have tried adding overflow-x: scroll. If I don't limit vertical scrolling and switch to the responsive device view on chrome or firefox (Ctrl+Shift+M), there's a large empty space at the bottom, which is the reason I want to disable vertical scrolling in the first place.
My code: https://codepen.io/dan6200/project/editor/ABRqpk
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.
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 have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.
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.