Priorize scroll on element

Question

I am having some scrolling issue when using my website on mobile devices (tested on iPhone).

The issue is that, on mobile, when touching or moving finger outside of the scrollable div, when trying to scroll this div after that, it is blocked until you wait a moment or scroll slowly, or touch it.

https://imgflip.com/gif/75nefo shows my issue. when scroll outside 'scrollable', then when scrolling back into scrollable, it keeps scrolling the whole body and takes a few more tries until it finally scrolls where I want.

The website is the following, as seen in the gif.

body{
            margin: 0;
            padding: 0;
        }
        .frame{
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100vh;
            background-color: lightblue;
            overflow: hidden;
        }
        .scrollable{
            overflow: scroll;
        }
        .bottom-nav{
            width: 100%;
            background-color: lightcoral;
            padding: 30px 10px;
            box-sizing: border-box;
        }
        .sample-cube{
            background-color: lightgreen;
            box-sizing: border-box;
            padding: 10px;
            width: 100%;
            height: 200px;
        }
        .sample-cube + .sample-cube{
            margin-top: 10px;
        }

<body>
<div class="frame">
    <div class="scrollable">
        <div class="sample-cube"> this is stuff on the scrollable area</div>
        <div class="sample-cube"> </div>
        <div class="sample-cube"> </div>
        <div class="sample-cube"> </div>
        <div class="sample-cube"> </div>
        <div class="sample-cube"> </div>
        <div class="sample-cube"> </div>
    </div>
    <div class="bottom-nav">
        navigation area with options
            </div>
</div>
    
</body>

I was wondering if there's any way to give the scrollable div a priority so that, whenever it is scrolled on, it scrolls from the first finger touch-swipe instead of being locked...

More style context would be helpful. Do you want the bottom-nav to be sticky? — Kwright02, Dec 27 '22 at 22:27
Hey! Sorry it's my first post here. This code snippet above is an abstraction from a bigger project. The body is fixed and has height of 100vh, and this frame div is a flex with orientation:column. I made it this way so that the 'bottom-nav' div would stay at the bottom, allowing the 'scrollable' div to take the rest of the horizontal space. Didn't wanna make the 'bottom-nav' sticky or fixed because that would make the scrollable div take the whole space, and I would have to adjust its bottom padding so that the content 'under the bottom-nav' would be reachable. — Airam Studio, Dec 27 '22 at 22:42
Sorry I am probably being really bad at explaining this :v. Another thing that happens is that the 'bottom-nav' div can have different heights as the content inside it changes, that's why I went with the whole flex thing instead of making it sticky or fixed, but even when making it sticky of fixed, the problem I am experiencing persists. The issue im having is that when I touch anything outside of 'scrollable', and then scroll on 'scrollable' again, for the first few touches, this scroll is blocked, because I touched outside of that div. Ill try to make a gif — Airam Studio, Dec 27 '22 at 22:43
No no, I've got you. So what you should do instead is not make the body height fixed, but instead mark the bottom nave as position:sticky; Alternatively, depending on the framework you're using (if you're using one) just make the whole thing a flex column: — Kwright02, Dec 27 '22 at 22:46
This way you can set a fixed height on the bottom nav and the rest of the content will flex to fit it. Then the content within the other scroll part would scroll as you'd expect. There's a few ways to do it as i've explained, you just kind of have to play with it and keep it simple. — Kwright02, Dec 27 '22 at 22:47
As you can see above, I took the approach you mention about making a flex-column, and it works perfectly, but I am afraid that is not my issue. I'll make a gif because its hard to explain for me, sorry. — Airam Studio, Dec 27 '22 at 22:50
Check [MDN overscroll-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior), I suspect that it will fix your issue. — Rene van der Lende, Dec 27 '22 at 23:10
@RenevanderLende I have tried adding it to 'scrollable' at contain, which makes it 'bounce' when reaching end, and 'none', which makes it stop, however, this doesn't fix my issue, which is that when I scroll on the body, it takes a few tries to be able to scroll back on the 'scrollable' — Airam Studio, Dec 27 '22 at 23:18
Your issue doesn't show on my Windows Desktop or Android phone. Sorry, can't help you with iPhone issues... — Rene van der Lende, Dec 27 '22 at 23:31

Airam Studio · Answer 1 · 2022-12-30T23:27:31.007

Ended up finding something that works for me, after doing some investigation, the issue seems to be related to how IOS Safari handles scrolling. This question has many approaches as answers but there's one in particular that works the best for me.

There's this library that lets you block the body scroll, when you want a fixed body like on my case, and allow scroll only on a certain element. It works like a charm!!!

Body Scroll Lock on npmjs

Now my scroll doesn't 'freeze' when I scroll outside of my scrollable element and quickly scroll my scrollable element again!!

Priorize scroll on element

1 Answers1