How do i TOTALLY prevent scrolling on my website even if there is overflow. I just don't want to hide the scrollbars because you usually can just use the mousewheel or page down anyway. I want them to be both hidden and locked.
The problem is that i have this structure(with real css and html of course)
<outerdiv height="100%">
<innerdiv height="100%">
<contentdiv height="ALOT">content</contentdiv>
</innerdiv>
<outerdiv>
I only want innerdiv to scroll its children but sometimes you accidentally focus the outerdiv and when you start scrolling then the innerdiv will scroll out of view (because it's a child of the outerdiv) and you cant view the actual content anymore.
The initial layout will give both outerdiv and innerdiv the height of the browser but when looking at content to scroll the outerdiv seems to look all the way to the children of innerdiv which makes no sense as this already scrolls by itself.
If you use whole screen anyways, then why not just use position:absolute (with top, left, right and left set to 0) and overflow:auto with the innerdiv?
no scrolling:
style="overflow:none;"
automatic scrolling:
style="overflow:auto;"
Related
the question is a bit more complex than the title can describe. I'm trying to make something like this:
There's a one page layout with content sections. Each section is 100vh, some of them are taller. When user scrolls down or swipes an animation occurrs sliding to a next section. When in a taller section user scrolls freely unless at the bounds of the section, then an animation occurrs.
I've come up with an idea that the browser's scrollbar should be something of a controller, that means it should indicate a position value that would be translated by JS to proper animation. I've created a fixed positioned container with the sections over page's body with its height set to the total sections height so the scrollbar indicates proper values.
The problem is I think I don't want the scrollbar to be visible, because it makes a little paradox when dragging it. Also there will be some content sliding in from the side with its own scrollbar. I think I can hide the scrollbar by doing some tricks if the scrollbar is in a div, not window, but it looks like when a fixed container is in a container with a scrollbar the scroll doesn't happen when the mouse is over the fixed container.
So now I'm stuck between having a window scrollbar and not being actually able to scroll over fixed container. I'd appreciate any help so much. Cheers!
some html just for codepen links to work:
<div class="fixed">
<div class="section-container">
<div class="section"><h1>section 1</h1></div>
<div class="section"><h1>section 2</h1></div>
<div class="section"><h1>section 3</h1></div>
</div>
</div>
codepen example with body scroll
codepen example with container scroll
You added scroll before fixed so it doesn't matter if you have scroll or not it is fixed so you cant scroll over fixed area only under.
I have an overlay that I created with a width of 700px and height of 500px.
The contents of it will be quite long though and so the user will have to be able to scroll up/down within the overlay.
Could I get a suggestion on how to set this up taking into consideration the fact that scroll bars vary in width in each browser?
For example if I add 15px of padding-right to the overlay wrapper, it displays great in Firefox.
The contents will fit perfectly within the div and a horizontal bar will not appear.
However in another browser, the vertical scroll bar may be 20px wide, this would cause the contents to be forced to scroll horizontally, or, if I disable overflow-x, they would be cut off by 5px on the right.
How can I get it so that, no matter the browser, when the vertical scroll bar appears, the width of the overlay wrapper adjusts so that its contents can be displayed perfectly with no horizontal scroll bar?
Overflow property sounds like what you need: overflow:scroll;? But I guess I'm not sure what your concern of the different width of scrollbars is. How is it setup that this is variable?
Or a different look at your problem, put the div with your overlay wrapper inside another div and have the new div have the scroll property, thus making it so the first directly has nothing to do with scroll bars. Ex: [link]
EDIT: Looking at example you provided, do you want something like this? Trick is like I said above putting div around everything, but instead not giving it a width and having it display:inline-block; (display) so it fits the child (but the scroll wheel stays outside of the child).
EDIT 2: Note if you need it to center on screen, you must have another parent div surrounding the inline-block, and have the inline-block text-align:center;. (example)
use max-width and jquery scrollbar plugin jscrollpane.
You can define the scrollbar width and styles for each browser, if the need it.
http://jscrollpane.kelvinluck.com/
I already asked this question, but I didn't explain it too well, so I removed the thread. Now I have made an example in jsfiddle to show my problem:
http://jsfiddle.net/6APjt/
I want a page with a header and below that a canvas. This canvas expands when I click on the zoom button. When this canvas expands there is an overflow that I want to be visible with scrolling. This is because I want the header of the page visible all the time, also when I scroll to the bottom of the canvas.
In the example you see that i have used a div with style overflow set to hidden (to prevent that when you scroll, the whole pages is scrolled). I tried to solve this by adding another div in this div with the property overflow set to scroll. This solves the vertical scroll, but I can't scroll horizontally.
Your problem is in your javascript!
testcanavs.height *= 1.25;
There is a spelling error in there, change it to this and it will work
testcanvas.height *= 1.25;
EDIT: Try setting height, or max-height on your containing div. See this fiddle
Your div will grow since height: auto is the default. Set it manually.
I would like an element fixed to the top of the viewport, when the user scrolls down the page it remains at the top of the viewport... easy. If the window is narrower then 960px the horizontal scrollbars appear. If the window is scrolled horizontally I would like the content inside this fixed element to scroll with it.
Please check out the demo, the two green boxes should always line up. Make your window narrow and scroll horiz, notice how they no longer line up.
Is this possible without JavaScript? Should work in IE7+ and not totally break in IE6.
http://www.louiswalch.com/beta/t/_scrolltest4.html
I don’t think you can achieve that without JavaScript.
position: fixed means that the element is positioned relative to the viewport. You want that vertically, but you don’t want it horizontally. I don’t think there’s any way to achieve that in CSS.
You can't have position:fixed on an overflow scrolling content. You need to use JavaScript for this. i answered a similar question using jQuery at Fixed header inside scrolling block where a div is fixed even if content is scrolling by overflow.
Check working example at http://jsfiddle.net/VswxL/3/
I'm working to build a CSS layout that has a fixed header, lefCol and Right Col, but the height of the MainCenterColumn (#mainCol) can scroll.
Here's what I have so far: http://jsfiddle.net/DscT6/
The issue with this is, on the mac you can scroll by dragging your fingers on the touchpad. I noticed that the scrolling only works if you mouse is over the MailCol, if your mouse is over the Left or Right Col the page doesn't scroll. Any ideas? Have you seen this? Suggestions? thanks!
Here http://jsfiddle.net/laukstein/DscT6/3/ it works fine.
I agree with polarblau, if you add overflow: auto that element will automatically have the scroll as needed, if you remove the overflow rule the entire page will have the height of the highest element and so it will scroll.