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
Related
I'm building a web page that consists of multiple columns. The page has CSS mandatory scroll snapping enabled on the x axis so that after each horizontal scroll the page should snap so the closest column is centred.
What's odd is that on Safari on iPhone it seems to scroll sideways way too easily when height is set on the scroll container. Even a vertical scroll that has even a tiny amount of sideways movement in it – as is natural when you're scrolling with your finger – makes the page scrolls sideways.
However when I unset height it just scrolls normally and isn't overly sensitive to sideways movement.
Why does a fixed height affect the scroll sensitivity?
I've put up a codesandbox here.
You can test the difference by uncommenting the height: 100vh style on the .container class.
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.
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.
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 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.