Site logo

Archived topic

Scroll gap on mobile slideout

9 replies · Started by Dominik on March 5, 2021

Viewing posts 1–10 of 10

Hi there,

we do have some scroll gap with the slideout (and also with a self made additional menu).
When you scroll the menu fast on mobile, you can see the body content for a blink of an eye.
Is there a way we can prevent that?

https://imgur.com/a/nL9yMSO

Thanks guys!
Best wishes,
Dominik

Hi there,

What you're seeing there is the browser trying to react to change of the phone's UI changing on scroll.

What you could do is try to prevent scrolling when the slideout is opened:

.slide-opened {
    overflow-y: hidden;
}

Let me know if that helps or not :)

Hi Tom,

thanks for your response!
Unfortunately no change in scroll behaviour.

Tricky one this - slight change try:

.slide-opened {
    overflow: hidden !important;
}

Hi David,

cool, that works for the slideout menu.
How can we make that work for the selfmade "+ weitere Appartements" menu too?

Where can is see the self-made menu ( sorry i need a coffee top up lol )

added to private info :)

Hi there,

I've tried checking your site and the custom menu you've made doesn't able to be showing overflow scroll behavior when I checked it. (android phone)

Here's something to ponder on:

Even if it did have an overflow scroll appearing, I'm not sure it's a good idea to remove this especially on smaller screens as some items within the custom menu won't be selectable if it goes to the bounds of overflow on smaller phones.

Some smaller phones like Moto G4 or Samsung Galaxy S5 probably won't even have a way to tap on "> Montiel" menu item if overflow behavior is set to None as the screen will be too small to fit everything in.

Hi Elvin,

damn, you are right :) That was an additional problem – so I set it to overfloy-y: scroll. Now it works well.

Thanks!
Dominik

Nice one. Glad you got it sorted. :D

This archived topic is closed to new replies.