Click events inside scrollable target triggers JS error

[chrismadrigal]

Click events inside scrollable target container trigger an error

Here is a Vue component example:

<script>
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

export default {
    data() {
        return {
            show: false,
            scrollTarget: '',
        };
    },

    methods: {
        open() {
            this.show = true;
            disableBodyScroll(this.scrollTarget);
        },

        close() {
            enableBodyScroll(this.scrollTarget);
            this.show = false;
        },
    },

    mounted() {
        this.scrollTarget = document.querySelector('#full-screen-preview')
    },
};
</script>

<template>
    <div v-if="show" id="full-screen-preview">
        <a href="#" @click.prevent="close">X</a>
        <img src="..." alt="...">
    </div>
</template>

<style lang="scss" scoped>
    #full-screen-preview {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        background: #390423;
    }

    // Other layout styles here.
</style>

[willmcpo]

Should be an easy fix. Might not get to fixing it immediately though, maybe next week.

Otherwise feel free to submit a pull request.

[chrismadrigal]

Thanks @willmcpo.

[gavin310]

@chrismadrigal is that an iOS emulator you're using? Do you have a URL for it? Thanks

[willmcpo]

@chrismadrigal sorry - this is still an issue i presume?

[chrismadrigal]

@willmcpo I stopped using the library as it was a deal breaker for me but I'm assuming is still an issue.

[willmcpo]

Perhaps - I am soon to publish a change that may or may not affect t your issue. To understand further I just need to understand what the flow is with your code.

What is the value of scrollTarget at the point of clicking X? If it is undefined, why was it undefined at the point of clicking X?