Tweaking Scrolling on Mobile

Forum Moderators: not2easy

Message Too Old, No Replies

Tweaking Scrolling on Mobile

l008comm

6:58 am on Mar 19, 2023 (gmt 0)

I'm having two kind of annoying issues on this mobile page I'm working on. And these issues are very related.

First, that "snap" that happens at the end of a scrollable item. That lets you scroll PAST the end of the item, thereby revealing content underneath that is never supposed to be visible.

Also if you have a div, on top of another div. If you scroll to the end of the top div, then try to scroll more, the "scroll focus" switches to the underneath one, and you start scrolling content you can't even see. And the lower div "holds" the scroll focus way too long, you have to completely let go of everything and wait a few seconds before the focus moves back to the top.

I can see how in some situations, these could be useful features. But in my specific situation, they are both super annoying features that I'd love to be able to manipulate somehow.

not2easy

4:02 pm on Mar 19, 2023 (gmt 0)

You would need to share the CSS in question to determine what might cause that problem. Without knowing, responses would just be guesses. We don't need to see the entire file, but the lines involved in the problem might show its cause. Do those divs have classes that define the behavior?

There are instructions in the Charter: [webmasterworld.com...] on how to share this information.

l008comm

7:55 pm on Mar 19, 2023 (gmt 0)

This is all default scrolling behavior. I'll try to whip up a simplified jsfiddle post and link it here.

not2easy

9:03 pm on Mar 19, 2023 (gmt 0)

Sorry, I thought this was a CSS question.

lucy24

9:17 pm on Mar 19, 2023 (gmt 0)

This is all default scrolling behavior.

The moment we talk about nested divs, each with its own scrolling, we are out of the realm of defaults.

l008comm

11:11 pm on Mar 19, 2023 (gmt 0)

Ok here's a quick basic mockup:

[jsfiddle.net...]

On the real site, the grey box slides in and out but I just left if fixed in the mockup. So the pink box underneath is the real content.

So the behavior on a desktop browser is all normal. But on mobile browsers...
Once you get to the top or bottom of the grey box and try to scroll further, it starts scrolling the pink box instead.

The other issue is that on a touch device, you can also scroll past the end of the grey box, moving the whole box itself partially off the page revealing whats under it. I suppose I can fix that problem by just wrapping it in another div, having the child scroll not the parent.

But it would be great if I could stop the pink box from scrolling, while you are scrolling the grey box.
Also jsfiddle is not very mobile-device-friendly.

l008comm

11:27 pm on Mar 19, 2023 (gmt 0)

So I just found a tentative solution to the problem. If I just throw:
overscroll-behavior: none;
On the navigation box, aka the grey box in the sample code, it prevents both things I don't want. It prevents the bounce, and it prevents passing on the scroll to the box underneath it. Looks like it's only supported in iOS16 though so older phones may just have to deal with more annoying scrolling.

phranque

11:28 pm on Mar 19, 2023 (gmt 0)

But on mobile browsers...
Once you get to the top or bottom of the grey box and try to scroll further, it starts scrolling the pink box instead.

fyi this is the behavior i am seeing on desktop linux FF.

l008comm

11:28 pm on Mar 19, 2023 (gmt 0)

Oh neat, and I can also use the value "contain" to prevent the box underneath from scrolling, but keep the 'bounce' in the primary scrolling element.