Styling root (<html>) element in VueJs Nuxt

Question

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>

Nick Dawes · Accepted Answer · 2020-10-18 00:48:22Z

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.

answered Oct 18, 2020 at 0:48

Nick Dawes

2,2641 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Styling root (<html>) element in VueJs Nuxt

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related