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

toxifiedmatrix · 2021-01-06T20:27:11Z

toxifiedmatrix
Jan 6, 2021

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>

sadeghbarati · 2021-01-07T10:09:27Z

sadeghbarati
Jan 7, 2021
Collaborator

@toxifiedmatrix you are using Alpine js?

It's all about smooth-scroll API
https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md#scrollbarupdate

you have to update when the modal is open
or destroy onClose and init onOpen modal

0 replies

toxifiedmatrix · 2021-01-07T11:56:35Z

toxifiedmatrix
Jan 7, 2021
Author

@sadeghbarati Hey, thanks for reverting back!

Yes, I'm using Alpine JS, Tailwind CSS with Livewire stack. I have so many questions in my mind, on how this works.

So is it possible to run javascript every time I create an invitation so it updates the scroll?
What is the best way, to implement it?
Why this is only happening with modal, as when I am trying to add new data to the table in the main scroll wrapper, it successfully fetches and renders the data, without breaking the scroll wrapper, but in case of modal the scroll wrapper breaks, when new data or entry is added?

0 replies

sadeghbarati · 2021-01-07T12:11:42Z

sadeghbarati
Jan 7, 2021
Collaborator

SmoothScroll update runs on resize so if u add content to a wrapper without resizing you have to update it manually

It's a scroll plugin, not a native scroll

your modal removes from dom when it's hidden?

It's better to use smooth-scroll once on a wrapper for the whole body, not for modals u know the performance on mobile it gets laggy

Alpine api is clear use

x-show
or
x-init

on external Component Logic or inline

0 replies

toxifiedmatrix · 2021-01-07T12:22:00Z

toxifiedmatrix
Jan 7, 2021
Author

No the modal is just hidden, it is displayed when the modal is toggled and is hidden on vice versa. I am pushing all the modals to the @stack('modals') i.e. outside the main scroll wrapper, so the scroll is disabled when the modal is open. @stack('modals') is present inside the app.blade.php layout.

0 replies

toxifiedmatrix · 2021-01-07T12:30:22Z

toxifiedmatrix
Jan 7, 2021
Author

Okay I see, I just need to figure out for once, how it is done, after that, I'll test it for mobile as well.

Here is my modal component, how should I exactly format it, sorry for being a noob. Please help me out with this.

@props(['id', 'maxWidth'])

@php
$id = $id ?? md5($attributes->wire('model'));

switch ($maxWidth ?? '2xl') {
    case 'sm':
        $maxWidth = 'sm:max-w-sm';
        break;
    case 'md':
        $maxWidth = 'sm:max-w-md';
        break;
    case 'lg':
        $maxWidth = 'sm:max-w-lg';
        break;
    case 'xl':
        $maxWidth = 'sm:max-w-xl';
        break;
    case '2xl':
    default:
        $maxWidth = 'sm:max-w-2xl';
        break;
}
@endphp

<div
    x-data="{
        show: @entangle($attributes->wire('model')),
        focusables() {
            // All focusable element types...
            let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'

            return [...$el.querySelectorAll(selector)]
                // All non-disabled elements...
                .filter(el => ! el.hasAttribute('disabled'))
        },
        firstFocusable() { return this.focusables()[0] },
        lastFocusable() { return this.focusables().slice(-1)[0] },
        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
    }"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
    x-show="show"
    id="{{ $id }}"
    class="fixed top-0 inset-x-0 px-4 pt-6 z-50 sm:px-0 sm:flex sm:items-top sm:justify-center"
    style="display: none;"
>
    <div
        x-show="show"
        x-on:click="show = false" 
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 transform transition-all"
    >
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <div
        x-show="show"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }}"
    >
        {{ $slot }}
    </div>
</div>

0 replies

toxifiedmatrix · 2021-01-07T13:20:42Z

toxifiedmatrix
Jan 7, 2021
Author

@sadeghbarati Are you there? Help will be really appreciated. When I am using x-init="Scrollbar.update();" I'm getting the following error.

alpine.js:1907 Uncaught ReferenceError: Scrollbar is not defined
at eval (eval at d.el (alpine.js:140), :3:36)
at d.el (alpine.js:140)
at d (alpine.js:127)
at f (alpine.js:135)
at be.evaluateReturnExpression (alpine.js:1747)
at new be (alpine.js:1505)
at Object.initializeComponent (alpine.js:1904)
at alpine.js:1849
at alpine.js:1863
at NodeList.forEach ()

0 replies

sadeghbarati · 2021-01-07T20:46:54Z

sadeghbarati
Jan 7, 2021
Collaborator

Like variable declare window variable in a parent javascript file that all page can access to this script then:

window.scrollbarInstance = null

scrollbarInstance = Scrollbar.init('element', {
   options...
})

scrollbarInstance.update()

0 replies

toxifiedmatrix · 2021-01-07T21:27:10Z

toxifiedmatrix
Jan 7, 2021
Author

@sadeghbarati Hey, thanks for the revert!

This is how I'm doing it. As the content of the modal is present in the content-wrapper, so I am initiating it as scrollbarInstance. Then I'm using x-init="scrollbarInstance.update()" on the modal component. But as I'm opening the modal again, the scrollbar isn't getting updated.

app.js

// Smooth Scrollbar
import Scrollbar from 'smooth-scrollbar';

var options = {
    'damping': 0.1,
    'thumbMinSize': 5,
    'renderByPixels': true
}

window.scrollbarInstance = null;

Scrollbar.use(EdgeEasingPlugin);
Scrollbar.init(document.querySelector('#main-wrapper'), options);

scrollbarInstance = Scrollbar.init(document.querySelector('#content-wrapper'), options);

component/modal.blade.php

<div
    x-data="{
        show: @entangle($attributes->wire('model')),
    }"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"


    <!-- Initating Scrollbar Update -->
    x-init="scrollbarInstance.update()"


    x-show="show"
    id="{{ $id }}"
    class="fixed top-0 inset-x-0 px-4 pt-6 z-50 sm:px-0 sm:flex sm:items-top sm:justify-center"
    style="display: none;"
>
    <div
        x-show="show"
        x-on:click="show = false" 
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 transform transition-all"
    >
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <div
        x-show="show"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }}"
    >
        {{ $slot }}
    </div>
</div>

0 replies

toxifiedmatrix · 2021-01-07T21:37:23Z

toxifiedmatrix
Jan 7, 2021
Author

One more thing I don't understand is that, why the scroll jumps whenever I close the modal and behaves oddly whenever I open the modal? As the modal is in the hidden state, when the modal closes.

0 replies

sadeghbarati · 2021-01-08T11:33:17Z

sadeghbarati
Jan 8, 2021
Collaborator

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

it's might be Alpine transition bug
check your x-show onClose
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
check delegateTo smoothscroll option delegateTo: ModalElement

0 replies

toxifiedmatrix · 2021-01-10T11:35:36Z

toxifiedmatrix
Jan 10, 2021
Author

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

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

Replies: 11 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

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

toxifiedmatrix Jan 6, 2021

Environment

Issue Summary

Steps to Reproduce

Replies: 11 comments

sadeghbarati Jan 7, 2021 Collaborator

toxifiedmatrix Jan 7, 2021 Author

sadeghbarati Jan 7, 2021 Collaborator

toxifiedmatrix Jan 7, 2021 Author

toxifiedmatrix Jan 7, 2021 Author

toxifiedmatrix Jan 7, 2021 Author

sadeghbarati Jan 7, 2021 Collaborator

toxifiedmatrix Jan 7, 2021 Author

toxifiedmatrix Jan 7, 2021 Author

sadeghbarati Jan 8, 2021 Collaborator

toxifiedmatrix Jan 10, 2021 Author

toxifiedmatrix
Jan 6, 2021

sadeghbarati
Jan 7, 2021
Collaborator

toxifiedmatrix
Jan 7, 2021
Author

sadeghbarati
Jan 7, 2021
Collaborator

toxifiedmatrix
Jan 7, 2021
Author

toxifiedmatrix
Jan 7, 2021
Author

toxifiedmatrix
Jan 7, 2021
Author

sadeghbarati
Jan 7, 2021
Collaborator

toxifiedmatrix
Jan 7, 2021
Author

toxifiedmatrix
Jan 7, 2021
Author

sadeghbarati
Jan 8, 2021
Collaborator

toxifiedmatrix
Jan 10, 2021
Author