Scrolling on child doesn't scroll the parent

Question

I am building a sticker choosing keyboard for a chat app. The parent is set to overflow-x: scroll and the individual sticker containers are set to overflow-y: scroll.

Here is the HTML of the svelte code:

<div class="stickerKeyboardContainer" transition:fly|global={{y: 40, duration: 100}} use:stickersHandler>
    <div class="stickerKeyboard">
        <div class="headers">
            <button on:click={() => { moveHeads('left'); }} class="navBtn hoverShadow"><i class="fa-solid fa-chevron-left" /></button>
            <div class="stickersHeader" id="stickersHeader" bind:this={stickersHeader}>
                {#each Stickers as sticker}
                    <img loading="lazy" class="hoverShadow" data-group="{sticker.name}" class:selected={$selectedSticker == sticker.name} src="/stickers/{sticker.name}/animated/{sticker.icon}.webp" alt="{sticker.name}">
                {/each}
            </div>
            <button on:click={() => { moveHeads('right'); }} class="navBtn hoverShadow"><i class="fa-solid fa-chevron-right" /></button>
        </div>
        <div on:scroll={() => {console.log("scrolling")}} class="stickersBody" id="stickersBody" use:stickersBodyHandler>
            {#each Stickers as sticker}
                <div class="stickerBoard {sticker.name}" id="{sticker.name}">
                    {#each Array.from({ length: +sticker.count }) as _, i}
                        <img loading="eager" class="stickerItem" data-serial={i+1} src="/stickers/{sticker.name}/static/{i + 1}-mini.webp" alt="{sticker.name}">
                    {/each}
                </div>
            {/each}
        </div>
    </div>
</div>

enter image description here
enter image description here
enter image description here

I can only scroll by the scrollbar thumb. I implemented the same thing is vanilla js. But currently I'm re implementing the same thing using svelte.

I have compared both of my projects, they uses the exact same css and js. But I'm stuggling what is wrong with the code. Can you provide some suggestions that I can try?

I have compared both of my projects, they uses the exact same css and js. Scroll on child is not working on parent.

Answer 1

You said you used that to prevent pull refresh on touch devices. But after looking at your images I think this line is causing the problem. The posible reason could be that you have used:

*{
    overscroll-behavior: none;
}

or,

*{
    overscroll-behavior-x: none;
}

Your child container is overflowing the parent and your parent has a fixed width and height. So in order to trigger the parents' scroll you must allow the child to overscroll.

Remove the overscroll-behavior: none; and alternatively write overscroll-behavior-y: none; on the body.

That will allow you to scroll on the x axis and block the pull refresh.