[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


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks in advance.
Billy


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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@hidden 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

Home


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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@hidden 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


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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@hidden 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@hidden 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


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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@hidden 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@hidden 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@hidden 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


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

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@hidden 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


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options