I have a Vue component that shows a full-size image when a user clicks on an image in a carousel. While the image is open, I want to prevent the user from scrolling the page. Right now, I am directly styling the documentElement with overflow:hidden; or overflow:auto; when the component is created or destroyed.
My concern is whether this approach is acceptable, or if there is a way to utilize the virtual DOM instead. I understand that directly manipulating the DOM is generally considered bad practice, but I haven't found an alternative solution yet. I attempted to use this.$root.$el.style, but it didn't work either.
<script>
export default {
props: ['imageSrc'],
created() {
document.documentElement.style.overflow = 'hidden';
},
beforeDestroy() {
document.documentElement.style.overflow = 'auto';
},
};
</script>