I have a simple position:fixed sidebar out of the way of page elements. The page scrolls fine, but when I mouse over the fixed sidebar, the page can no longer scroll. Could someone explain why this happens? and how to fix this?
This happens because only the part you hover over scrolls. For example if you create an element with "overflow: scroll", when you over over this element, it will scroll and not the whole page. Same thing is happening over here.
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
So, the question is pretty basic but I couldn't find an example snippet to start with.
Idea is to have multiple div with full-screen height and upon scroll, the whole of the div scrolls making the user think that they are on same position and content is coming on same position. [ kinda-ish]
I have an example website where such scrolling behaviour is done. here
Just a reference will help me start.
Thanks
I'm wondering that is there any way to scroll through fixed element in scrollable content. Here is prepared fiddle: https://jsfiddle.net/hbnfd8ts/13/
If I scroll on red box I should be able to scroll, but as you can see nothing happened. If I remove
.scrollable-div{
overflow-y:scroll;
....
and leave default browser scroll it works. Of course I can pass mousewhell event throught fixed content, but I'm wondering about only css way. Anyone had this issue?
I'm not sure if it's not a browser bug
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'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.