Why the smooth scrollbar wrapper breaks when new dynamic data is added within the wrapper?

Environment

• Browser: Chrome
• Version of smooth-scrollbar: Latest

Issue Summary

I am using smooth-scrollbar in Laravel 8 with Livewire. I am using the scrollbar wrapper in a modal, the modal has dynamic data, as it fetches the data from the database. As I load the page, the scrollbar on the modal works just fine, but as soon as I add a new entry and try to open the modal to view the entry, the scrollbar wrapper seems broken, and it only works back as I reload the page. After I reload the the page, the modal component with the scrollbar just works fine and it also displays the updated data as well. Why such sort of thing is happening? Please help me out with this.

Steps to Reproduce

As you can see below, I have wrapped the scrollable content of the modal within the content-wrapper i.e. the smooth scrollbar.

• Modal Component

<x-modal>
    <div>
        <div class="px-8 py-8 border-b bg-gray-100">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Manage Invitation
            </h3>
        </div>

        <div class="h-72 bg-cool-gray-50" id="content-wrapper">
            <div class="px-8 py-6">
                <ul class="flex flex-col divide divide-y w-full bg-white rounded-lg shadow">
                    @forelse($invitations as $key => $invitation)
                        <li class="flex flex-row">
                            <div class="flex flex-1 items-center px-8 py-4">
                                <div class="flex-1 mr-16">
                                    <div class="text-sm dark:text-white">
                                        {{ $invitation->email }}
                                    </div>
                                </div>
                                <button wire:click="deleteInvitation({{ $invitation->id }})" class="text-right flex justify-end">
                                    <x-icon.trash />
                                </button>
                            </div>
                        </li>
                    @empty
                    @endforelse
                </ul>
            </div>
        </div>
    </div>

    <div class="px-8 py-6 bg-gray-100 border-t text-right">
        <x-button.secondary wire:click="$set('showInvitationManagementModal', false)">Cancel</x-button.secondary>
    </div>
</x-modal>

[toxifiedmatrix]

Ohh okay, I see, thanks mate, cant I upload it as a repository?

[sadeghbarati]

If you share a live site that would be better to collaborate

surge - vercel - or laravel stuff - or simple server to push this site to it

---

1. it’s might be Alpine transition bug
2. check your x-show onClose
3. check smooth-scroll API again 3.1. scrollbarInstance.track.yAxis.hide(); 3.2. scrollbarInstance.scrollTo(0, 1000); 3.3. scrollbarInstance.yAxis.show(); on modal open
4. check delegateTo smoothscroll option delegateTo: ModalElement