Off Topic

8 replies to this thread. Most Recent

billy kimmel

26 Jan 2021, 10:28 pm

[Pro] Scroll div

I have a div that I would like to scroll independently of the page scroll when content falls below the visual fold of the browser window. Otherwise it should be fixed and not scroll.

I know this might be beginner 101 but I’m struggling.

In the example the side bar content is what i’m trying to effect.

Here is a reference example. https://harry-s-restaurant.webflow.io

Billy

http://www.smartytest.com/novita/index.php

billy kimmel

26 Jan 2021, 10:28 pm

Thanks in advance. Billy

waltd

26 Jan 2021, 11:53 pm

You can set overflow: auto and a fixed height on that element, and that will give it an independent scroll bar when needed.

Walter

On Jan 26, 2021, at 5:28 PM, billy kimmel <[email protected]> wrote:

I have a div that I would like to scroll independently of the page scroll when content falls below the visual fold of the browser window. Otherwise it should be fixed and not scroll.

I know this might be beginner 101 but I’m struggling.

In the example the side bar content is what i’m trying to effect.

Here is a reference example. https://harry-s-restaurant.webflow.io

Billy

http://www.smartytest.com/novita/index.php

Freeway user since 1997

http://www.walterdavisstudio.com

billy kimmel

27 Jan 2021, 3:27 pm

Yes I have the div set to overflow: auto and height: fixed but it still doesn’t work.

What is happening to the scroll is it will only show if your browser window is 1200px wide or less. Beyond that, no scroll.

If you draw the page short enough that content falls below the window and the window width is less that 1200px it will scroll, but it won’t show all of the content.

The one thing I left out before is that the side bar with the navs is NOT inline and is fixed. The content to the right is inline and there is a 300px padding on the page.

Billy

waltd

27 Jan 2021, 4:12 pm

This would be infinitely easier to diagnose if you would share a link to an example. If you can add some notes to the page (little floating divs like sticky-notes) showing what you want to grow and scroll in which direction, that would also help. If you have used any of the responsive breakpoints, remember that your settings can be different per-item based on which breakpoint you were on when you made those setting changes.

Walter

On Jan 27, 2021, at 10:27 AM, billy kimmel <[email protected]> wrote:

Yes I have the div set to overflow: auto and height: fixed but it still doesn’t work.

What is happening to the scroll is it will only show if your browser window is 1200px wide or less. Beyond that, no scroll.

If you draw the page short enough that content falls below the window and the window width is less that 1200px it will scroll, but it won’t show all of the content.

The one thing I left out before is that the side bar with the navs is NOT inline and is fixed. The content to the right is inline and there is a 300px padding on the page.

Billy

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

27 Jan 2021, 4:13 pm

Oops, sorry, I just scrolled back to your initial question. My bad.

Walter

On Jan 27, 2021, at 11:12 AM, Walter Lee Davis <[email protected]> wrote:

This would be infinitely easier to diagnose if you would share a link to an example. If you can add some notes to the page (little floating divs like sticky-notes) showing what you want to grow and scroll in which direction, that would also help. If you have used any of the responsive breakpoints, remember that your settings can be different per-item based on which breakpoint you were on when you made those setting changes.

Walter

On Jan 27, 2021, at 10:27 AM, billy kimmel <[email protected]> wrote:

Yes I have the div set to overflow: auto and height: fixed but it still doesn’t work.

What is happening to the scroll is it will only show if your browser window is 1200px wide or less. Beyond that, no scroll.

If you draw the page short enough that content falls below the window and the window width is less that 1200px it will scroll, but it won’t show all of the content.

The one thing I left out before is that the side bar with the navs is NOT inline and is fixed. The content to the right is inline and there is a 300px padding on the page.

Billy

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

27 Jan 2021, 4:15 pm

And looking at that, the two panes scroll independently when I make the viewport really small. Did you want the scroll position in one pane to affect the scroll position in the other? I can’t see anything wrong with this example, looking in Safari desktop.

Walter

On Jan 27, 2021, at 11:12 AM, Walter Lee Davis <[email protected]> wrote:

Oops, sorry, I just scrolled back to your initial question. My bad.

Walter

On Jan 27, 2021, at 11:12 AM, Walter Lee Davis <[email protected]> wrote:

This would be infinitely easier to diagnose if you would share a link to an example. If you can add some notes to the page (little floating divs like sticky-notes) showing what you want to grow and scroll in which direction, that would also help. If you have used any of the responsive breakpoints, remember that your settings can be different per-item based on which breakpoint you were on when you made those setting changes.

Walter

On Jan 27, 2021, at 10:27 AM, billy kimmel <[email protected]> wrote:

Yes I have the div set to overflow: auto and height: fixed but it still doesn’t work.

What is happening to the scroll is it will only show if your browser window is 1200px wide or less. Beyond that, no scroll.

If you draw the page short enough that content falls below the window and the window width is less that 1200px it will scroll, but it won’t show all of the content.

The one thing I left out before is that the side bar with the navs is NOT inline and is fixed. The content to the right is inline and there is a 300px padding on the page.

Billy

Freeway user since 1997

http://www.walterdavisstudio.com

billy kimmel

27 Jan 2021, 4:42 pm

Walter, the best way to show you what I’m after is to visit this page.

https://harry-s-restaurant.webflow.io

Observe how the content on the right and the navigation bar on the left work independently of each other as far as scroll is concerned. I want to do the same on my page.

Freeway has a template called “Portfolio” that is set up similarly but with the exception of the left content which doesn’t scroll. I want to make that scroll as well. Also when I make the overflow: auto my sub menu items are hidden. Maybe z-index can fix that, I’m not sure.

Billy

Back to Top

waltd

27 Jan 2021, 5:32 pm

I haven’t set up a way to run Freeway locally, since I updated to Catalina last year. So it would be best if you pointed me to an example of that template running in the wild. I don’t know if z-index will help your menus, either. z-index only controls relative “height” within a given context. So if you have two divs with different parents, z-index on one will not affect its layering with respect to a child of the other div.

Walter

On Jan 27, 2021, at 11:42 AM, billy kimmel <[email protected]> wrote:

Walter, the best way to show you what I’m after is to visit this page.

https://harry-s-restaurant.webflow.io

Observe how the content on the right and the navigation bar on the left work independently of each other as far as scroll is concerned. I want to do the same on my page.

Freeway has a template called “Portfolio” that is set up similarly but with the exception of the left content which doesn’t scroll. I want to make that scroll as well. Also when I make the overflow: auto my sub menu items are hidden. Maybe z-index can fix that, I’m not sure.

Billy

Freeway user since 1997

http://www.walterdavisstudio.com