Scrolling Overlay

Hi everyone,

I’m trying to figure out how to get an overlay to scroll and not the background behind the overlay. I know there are discussions already here, but I don’t understand the solutions, as there are multiple custom code solutions (And I’m not a whizz at scripting and apparently errors with iOS?). The page I’m trying to do this on is the BLOG page of the Share link below. I am wanting to have thumbnails on main page that once clicked open overlay to the ‘Read More’ story, then you can scroll content within the overlay (If there’s more over content), then have it so you can close the overlay and go back to the thumbnails.

Thanks in advance
Anton


https://preview.webflow.com/preview/charm-website-2020?utm_medium=preview_link&utm_source=dashboard&utm_content=charm-website-2020&preview=d819c9adca66b7048e0f1dae6a80f976&mode=preview

Hey Anton,

If I am understanding correctly, all you need to do to accomplish what you are trying to do, is change the overflow in the size settings for Container 5.

It is currently set to Hide Overflow which do exactly that, hide it. I can see how this could be misinterpreted though, but the setting you want to choose is Scroll as shown in this screenshot.
image

You might find that when you click the Read More button the page will scroll back to the top in the background. If that bugs you it should be no problem to fix with a small amount of custom code, I can walk you through if need be.

I hope this solves your problem!
AC

Hi Andrew, thank you very much, that worked. I see what you mean where the background bounces back to the top, is it much work to fix this to stay? As this might become an issue when there are more stories to click on? Sorry, I’m not very good at understanding the code side of things.

Hey Anton,

No worries at all. It is not much work, in fact only a couple lines of css and that’s all. A couple of changes are necessary though.

First things first; you need to change the interactions that happens when you click Read More to affect Container 5 instead of Blog1, this also needs to be done for interaction that happens when you close the window. Blog1 Needs to not be hidden so that the browser loads it with the rest of the page. To ensure that it is on top of the other content, give Blog1 a Z-Index value of something like 10.

In the page settings, navigate to the custom code sections at the bottom of the pop-out. In the <head> section, add this code:

.blog1{
pointer-events: none;
}

.container-5{
pointer-events: auto;
}

When it comes to adding more blog posts, I would recommend using collections. It’s worth changing to that right now. You will only have to build this once instead of repeating this process for every single blog post, which if this is for a client it would cause issues I imagine.

This should solve the issue though, let me know.
AC

Hi Andrew,

Thank you very much for your feedback, just getting to this now. I agree with you using CMS Collections would be better for this (which I’ve never done before).

So got my Thumbnails working on the page how I want them (responsively), but getting confused on how to link thumbnails to the overlay. In regards to the button in thumbnails

Also which would be the best way to build this, Can I use my original Overlay or do I have to use the CMS Collection Page down the bottom?

Also the Close button on top of overlay, I want to be fixed to top so blog scrolls underneath, but be 100% width of container, I’ve fudged it with percentages, but I’m guessing this is going to cause me grief when I start looking at ipad, mobile phone etc.

I’m getting myself in a muddle.

Hoping you can help, thanks in advance. I duplicated the Page from my original, the Page is now called Blog test.

Also In regards to your suggestion above the code stops the background scrolling, but when I changed it to ‘container 5’ instead of ‘Blog1’ the gold background stays there?

Thanks
Anton