I have this vue component that displays a full size image after being created when a user clicks an image on a carousel. When this is open, the user should not be able to scroll the page. Currently the way I've implemented this is by directly styling the documentElement with overflow:hidden; or overflow:auto; when the component is created or destroyed.
My questions is whether this is acceptable, or if there is a way in which I can use the virtual DOM for example. I know that directly interfering with the DOM generally is bad practice, but I can't seem to find a way to make it work. I've tried using this.$root.$el.style but that does not seem to work either.
<script>
export default {
props: ['imageSrc'],
created() {
document.documentElement.style.overflow = 'hidden';
},
beforeDestroy() {
document.documentElement.style.overflow = 'auto';
},
};
</script>
Have you considered using CSS instead? You could create a div with 100vh and vw, positioned absolutely above all over content (used position: fixed to prevent scrolling). Position the full size img element inside, and set its display to hidden. Tie the images in your carousel to a click method that updates the full size img src and changes the div’s display from hidden to block. Make sure you add a button or click event to the full size image so that the user can switch the display back to hidden.