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.
Related
I want to prevent the cards I have from leaving the div they are in when I resize the screen. I added overflow scroll in order to solve this and it works the way I would like but I don't understand what is causing this weird grey outline at the bottom of page. I dont have any styling that would cause it. I'm not sure if this a browser thing but is there a way to remove it?
I know the grey bar on the right is for scroll but what is the bar on the bottom across the card for?
Try overflow-y: scroll; instead of overflow: scroll;. This ensures the overflow scrollbar is only applied vertically.
I have recently noticed that when you have a div containing overflowed content that is scrollable, in chrome, you can smoothly transition scrolling from that div to the rest of the body, but in Safari, you can not. Instead of smoothly transitioning, the scrolling stops when you reach the top or bottom of the contained element, and you must scroll again to begin scrolling on the body. It is vital to the project I am working on that I allow Safari to scroll smoothly the same way Chrome does. For the life of me I can not figure out how to do this. Any input is appreciated, thank you for your time!
You can try my go to settings for a CSS element that is scrollable. Although I can't help you too much without seeing your code, try implementing these:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I usually apply these for iOs devices and it does the trick. Not 100% sure if it will help your problem.
Safari separates scroll gestures for different elements on purpose so that the user can clearly tell what element is being scrolled.
Of course, you can use JavaScript to solve this in a hacky way. For example, you can set the ScrollTop of body to the amount that the user scrolled when the div has reached to the bottom.
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
When I was studying the overflow property's values, I came across these two values: auto and scroll, which adds scrollbar(s) if the content overflows the element.
Could someone please explain me whats the difference between them?
Auto will only show a scrollbar when any content is clipped.
Scroll will however always show the scrollbar even if all content fits and you cant scroll it.
overflow: scroll will hide all overflowing content and cause scroll bars to appear on the element in question. If the content does not overflow, the scrollbars will still be visible, but disabled.
overflow: auto is very similar, but the scrollbars only appear when the content is overflowing.
There is a similar explanation of this here, with some screenshots to illustrate the point.
Take a look at CSS Tricks.
Auto will show scrollbar if and only if the content overflows; but scroll will always show the scrollbar, whether the content is overflowing or not.
Adding a point to the answer, Overflow:auto not worked in IE7 when position of the container is absolute Position relative overflow IE7. But setting Overflow:scroll works
overflow: scroll will show both horizontal and vertical scrollbar even when you don't need one or other. while, overflow: auto will show the scrollbar which your div needs. so basically auto will help you to get rid of both scollbar.
Here is more of that:
https://css-tricks.com/the-css-overflow-property/
In Windows, overflow: scroll will always show the scrollbar and overflow: auto will show the scrollbar only if the content is overflowing. In macOS, the overflow: scroll and overflow: auto will always show the scrollbar if the content is overflowing. Tested in Chrome. I highly recommend using overflow: auto as it works the same way and does not generate problems in windows
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;"