Overflow issue when scrolled down on the page #490

Roaann · 2025-01-22T10:49:39Z

Roaann
Jan 22, 2025

Hello, I have come across an issue where my sticky header drops off the page if I open a modal when I am scroll down on my page.

This is my demo page with a sticky header

No issues when I am at the top of my page:

When I open a modal scrolled down a bit:

My HTML:

<body id="body">
    <header class="sticky top-0 w-full bg-red-600 h-[100px]">header</header>
    <main class="flex flex-col flex-1 gap-4">
    @foreach(range(1,10) as $i)
        @if($i === 3 || $i === 7)
            <x-button wire:click="$dispatch('openModal', {component: 'tester'})">open modal</x-button>
        @endif
        <div class="h-10 flex w-full bg-blue-400">{{ $i }}</div>
    @endforeach
    </main>
</body>

The cause is in the modal.js file with this function where it sets the 'overflow-y-hidden' class on the body:

setShowPropertyTo(show) {
            this.show = show;

            if (show) {
                document.body.classList.add('overflow-y-hidden');
            } else {
                document.body.classList.remove('overflow-y-hidden');

                setTimeout(() => {
                    this.activeComponent = false;
                    this.$wire.resetState();
                }, 300);
            }
        },

I think I have 2 options:

Overwrite the function and don't add the class, but I guess it's there for a reason so I think that would just cause me issues down the road.
Update the 'top' property of my header to the window.scrollY value when the modal is opened, and revert it to 0 when it's closed. But I can't find a hook / event to facilitate this properly without some janky position flickering

Curious to see if anyone else has this problem and how they fixed it :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Overflow issue when scrolled down on the page #490

{{title}}

Replies: 0 comments

Select a reply

Overflow issue when scrolled down on the page #490

Roaann Jan 22, 2025

Replies: 0 comments

Roaann
Jan 22, 2025