overflow-y of body is not removed on lightbox close

[NickHatBoecker]

I'm using the version for Vue2. When closing the lightbox via ESC, close button or mask the body element stil has overflow-y: hidden set.

Currently I'm using a workaround to fix this.
Also index isn't reactive. I have to use @on-index-change to update current index variable.

<template>
    <vue-easy-lightbox
        moveDisabled
        scrollDisabled
        :visible="show"
        :imgs="images"
        :index="currentIndex"
        @on-index-change="onIndexChange"
        @on-error="close"
        @hide="close"
    >
        <template #toolbar>
            <span></span>
        </template>
    </vue-easy-lightbox>
<template>

<script>
import VueEasyLightbox from 'vue-easy-lightbox'

export default {
    components: { VueEasyLightbox },

    data: () => ({ currentIndex: 0, show: false }),

    mounted () {
        setTimeout(() => {
            // Timeout in order to load the first image
            this.show = true
        }, 2000)
    },

    computed: {
        images () {
            return this.$store.getters.images
        },
    },

    methods: {
        close () {
            document.querySelector('body').style['overflow-y'] = 'visible'
        },

        onIndexChange (oldIndex, newIndex) {
            this.currentIndex = newIndex
        },
    },
}
</script>

[XiongAmao]

Hi,

Neither index nor visible is reactive. By design, you should control it by yourself.
This means that you can change visible or index at anytime to activate vue-easy-lightbox or switch images.

overflow-y: hidden will be clear when visible change back to false.

Maybe you can provide a repo and I'll see what the issue is.

vue-easy-lightbox/src/vue-easy-lightbox.vue

Lines 556 to 593 in f848e22

	disableScrolling() {
	if (!document) return
	this.lastBodyStyleOverflowY = document.body.style.overflowY
	document.body.style.overflowY = 'hidden'
	}
	enableScrolling() {
	if (!document) return
	document.body.style.overflowY = this.lastBodyStyleOverflowY
	}
	// watch
	@Watch('visible', { immediate: true })
	onVisibleChanged(visible: boolean) {
	if (visible) {
	this.init()
	this.$nextTick(() => {
	on(this.$refs.modal as Element, 'touchmove', (e: Event) => {
	e.preventDefault()
	})
	if (this.scrollDisabled) {
	this.disableScrolling()
	}
	})
	} else {
	if (this.scrollDisabled) {
	this.enableScrolling()
	}
	}
	}
	@Watch('index')
	onIndexChange(newIndex: number) {
	if (newIndex < 0 || newIndex >= this.imgList.length) {
	return
	}
	this.setIndex(newIndex)
	}

[aasutossh]

So I was using two <vue-easy-lightbox>es with same :visible option.
After removing one of them, it worked.

[XiongAmao]

The issue was fixed in v1.11.0