1

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>
niekh1234
  • 11
  • 1
  • 1

1 Answers1

0

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.

Nick Dawes
  • 2,089
  • 1
  • 13
  • 20