Fixed section, scrollable content

Design help General
1

Hi,

Just looking for the easiest way to dissociate the scrolling behavior of a section and its content.
I basically want to create a two level scrolling system. The standard (section to section) and then inside the section so that the user can jump to section to section and scroll inside them before going to the next one.

Tried sticky, interaction but nothing really convincing…

Thanks

3

Hi @martinreboux

let us see what you have done so far.
Please share a read-only link of your project:

Thanks,
Matthias

1 Like
4

I would set a fixed height for each section (or whatever div you want to scroll within the section), then set the overflow to scroll. That way you’ll scroll through the page, then on a section that has scroll-able content you will be able to scroll just the same.

5

That is working but the result is king of messy. The section is scroll until a certain point and then the content get scrollable which result in something hard to use.

6

If anything, I’d try using a “while scrolling into view” interaction to move the content within the section you’ve created. To do this for a background image, for example, I would set a fixed height for the section and set the overflow to “hidden”. Then I’d create a div inside of the section and set the height to 2x the height of the section. Using the interaction you can have the background image move inside of the section block without the need for a scrollbar.