search

inertiajs / inertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
https://inertiajs.com
MIT License
6.35k stars 428 forks source link

Scroll region not working when parent has hidden overflow #450

Closed Propaganistas closed 3 years ago

Propaganistas commented 3 years ago

Versions:

Describe the problem:

It appears that the scroll-region attribute (https://inertiajs.com/scroll-management#scroll-regions) doesn't work in the following situation (which also happens to be a Tailwind UI sidebar layout example):

<div class="flex flex-row overflow-hidden">
    <div class="flex-shrink-0">
        <!-- A static sidebar element -->
    </div>
    <div class="flex-1 overflow-y-auto" scroll-region>
            <!-- content -->
    </div>
</div>

As soon as the parent's overflow-hidden class is removed the scroll-region is taken into account, but of course that breaks the layout of a static sidebar and a scrollable content region in this case.

Any advice?

enkota commented 3 years ago

Discovered the same issue tonight. Did you manage to find a workaround? @Propaganistas

Propaganistas commented 3 years ago

Unfortunately I didn't. At least not without rethinking the entire HTML and CSS classes structure.

enkota commented 3 years ago

Any ideas @reinink ? I am wondering if we could make use of this method to calculate the Y scroll position of that div. Assuming scroll-region is calculating the height of the outer window when using overflow-hidden

Inertia.post('/users', data, { preserveScroll: (page) => Object.keys(page.props.errors).length, })

I believe the Ping CRM demo is quite close to the code @Propaganistas has provided.

reinink commented 3 years ago

I don't think this is an Inertia issue, but rather an issue with the layout. The above snippet does not create proper scrollable areas—at least from my testing. However, this does:

<!DOCTYPE html>
<html class="h-full">
<head>
    <title>Overflow</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-full overflow-hidden">

<div class="flex flex-row h-full">
    <div class="p-8 bg-blue-200 flex-shrink-0">
        <div>sidebar item</div>
        <div>sidebar item</div>
        <div>sidebar item</div>
        <div>sidebar item</div>
        <div>sidebar item</div>
    </div>
    <div class="p-8 bg-red-200 flex-1 overflow-y-auto" scroll-region>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

</body>
</html>

Try this approach. 👍

Keep in mind that scroll-region doesn't make something scrollable. It must be scrollable already, and then Inertia simply uses scroll-region to keep track of the scroll position of that area. Meaning, if you can't get the scrolling to work on it's own (without Inertia), then it's not going to work with Inertia either.

I'm going to close this issue, as I don't think this is an Inertia issue. Please report back if this isn't the case, and there's a bug with Inertia.