Vue-js-modal: How to restore page scroll when using scrollable modal? [fixed in 1.3.8]

Created on 11 Dec 2017 · 18Comments · Source: euvl/vue-js-modal

Hi! Is it possible to restore page scroll when modal with scrollable enabled property closed? It seems that the modal resets page scroll to 0 when it opens in scrollable mode. Without scrollable=true it's ok, page scroll is not affected.

question answered

Source

mvkasatkin

👍2

Most helpful comment

Hey guys, the problem is that some people previously asked to fix the page scroll when scrollable=true even though i didn't want to modify body class that was the only was to do it.

Take a look in Modal.vue css, probably you will be able redefine position:fixed that is applied to body with position:relative !important or something like that.

euvl on 4 Jan 2018

👍3

All 18 comments

Yes, I am encountering this too, after I've bumped up the version from 1.3.4 to 1.3.6.

simboonlong on 15 Dec 2017

+1 guys, a little annoying, hope it will be fixed soon

dmydry on 21 Dec 2017

+1, hope it will be fixed soon

lostan on 24 Dec 2017

Seems like this will be impossible unless the modal is created as direct <body> child. Also this will fix #134

ingria on 4 Jan 2018

@ingria, #134 looks like absolutely different issue. I have no troubles with overlays and I cannot imagine how can I fix page scroll by z-index?

mvkasatkin on 4 Jan 2018

@mvkasatkin Not with z-index, but with modal created in <body>. Then it will be possible to create fixed container that will not alter page scroll at all.

About #134. Imagine your app has such markup:

body
 - header  -> fixed, z-index:100
 - content -> z-index: 50
 - - modal -> inherits z-index: 50

In this setup header will be displayed above the modal. Creating a modal into the root node (body) allows to set z-index to whatever value you want.

Like this:

body
 - modal   -> z-index: 9000
 - header  -> fixed, z-index:100
 - content -> z-index: 50

ingria on 4 Jan 2018

@ingria Yes, this workaround works well. But it would be very nice not to touch (or save and restore) page scroll in case of component with nested modal and not violate an independent context, taking the modal form out of it.

mvkasatkin on 4 Jan 2018

Hey guys, the problem is that some people previously asked to fix the page scroll when scrollable=true even though i didn't want to modify body class that was the only was to do it.

Take a look in Modal.vue css, probably you will be able redefine position:fixed that is applied to body with position:relative !important or something like that.

euvl on 4 Jan 2018

👍3

@euvl thank you! position: relative on body (or .v--modal-block-scroll with!important) solves the problem

mvkasatkin on 4 Jan 2018

🎉1

I think it should work now (after i've changed position: fixed => position:absolute).
Lemme know if it does.

euvl on 12 Jan 2018

Works for me, thanks a lot!

sebastianjung on 12 Jan 2018

@sebbler1337 no worries at all 👍

euvl on 12 Jan 2018

there is another Problem with page scroll restore:

just a modal with height:auto and scrollable:true
if you click the background once everything is fine.
if you doubleclick the background before Modal is closed the page scroll gets restored and disabled again.

https://codesandbox.io/s/v351k6x350
https://v351k6x350.codesandbox.io/

shpfive on 2 Feb 2018

to atenuate the problem I put the tag on the modal @closed="close"
and in the code
close() {
document.body.classList.remove("v--modal-block-scroll")
}
kind of works.

Kxtreme on 6 Feb 2018

👍1

Hi there, I have the same issue on version 1.3.10.

When I click on the modal half way down the page, the page scroll jumps to the top when the modal opens. When the modal closes the user is still on the top of the page.

Here's my modal settings (it does it on both scrollable true or false):

<vue-modal width="350" height="auto" :scrollable="true" name="myModal">
<vue-modal width="350" height="auto" :scrollable="false" name="myModal">

I tried setting .v--modal-block-scroll to position: relative !important but it did not make a difference.

Maybe I am missing something important? Thank you!

Emirii on 16 Feb 2018

I am trying to replicate your issue without success it is working fine so here is my modal code see if it helps:

<modal name="client-modal" height="auto" :scrollable="true" :clickToClose="false" @closed="close">
            <div slot="top-right">
                <button class="round-button" @click="$modal.hide('client-modal')">❌</button>
                <br v-if="isViewingJob || isEditingJob || isEditingPayment">
                <button v-if="isViewingJob || isEditingJob || isEditingPayment" class="round-button" @click="back">&#9664;</button>
                <br v-if="isEditingJob || isEditingPayment">
                <button class="round-button" v-if="isEditingJob || isEditingPayment" @click="save">&#128190;</button>
                <br v-if="!isEditingJob && !isEditingPayment && !isViewingJob">
                <button class="round-button" v-if="!isEditingJob && !isEditingPayment && !isViewingJob" @click="send">  {{(sending ? '&#9676;' : (concludeSending ? '&#10003;' : '&#9993;'))}}</button>

            </div>
            <loading v-if="loading"></loading>
            <clientview v-show="!loading" :client="clientManaging" :permission="permission" :save="saving" :cancel="cancel" v-if="isViewingClient" :isViewingJob="isViewingJob" :isEditingJob="isEditingJob" :isEditingPayment="isEditingPayment" @loaded="loaded" @jobLoadedForViewing="jobLoadedForViewing" @saved="savedEditedJob" @jobLoadedForEditing="jobLoadedForEditing" @paymentLoadedForEditing="paymentLoadedForEditing"></clientview>
</modal>

Kxtreme on 16 Feb 2018

I have same issue but only with touchscreens If I tap on modal bg, scrollbar disapears. Browser chrome desktop or mobile. Latest lib version.
For reproduction, use "partnership inquiry" button on this page https://module-5.com/en/service/ig