Designing a webpage with a curved border overly

Design help General
1

Hey, I have been working for awhile now on trying to create a setup for a site that has a 20 px (10px mobile) border; where the interior is the scrollable section, but the border always remains in place like on This site while still allowing you to create interactions that are triggered by your page scrolling.

I found this was pretty easy, just put a bar on top and bottom fixed in place with some margin on the top and bottom section, but here’s the tricky part. I have been trying to make the border curved like this:

37%20AM
37%20AM2214×1244 37.9 KB

When I try to do this I find it near to impossible to get the border to remain fixed, being able to scroll, and being able to interact with elements on the page at the same time. I can normally get any 2 of those 3 things working at once, but all the solutions seem to fall apart when I get to the third.

Does anyone know how I might achieve creating a curved interior section with a fixed border overlay that can trigger interactions on page scroll, while still allowing you to interact with elements on the page (like buttons, hovers ect.)?

2

Hi @Maydris, at the moment the page scroll interactions do not work on elements nested in an element having a class with scroll set to Scroll or Auto.

To get the page scrolling interaction to work, the scroll must be on the body, it will not work when the inner content is set to overflow scroll or auto.