0

The first div of the page takes 100vh of height. I want to disable scroll while this div takes all the space of viewport.

For desktop devices, I did this and it works fine: 

    <div class="overlay" onmouseover="document.body.style.overflow='hidden';"  onmouseout="document.body.style.overflow='auto';">

But it doesn't work on mobile devices.

Any ideas?

Ruslan Anisimov
  • 47
  • 1
  • 9
  • I don't think it's clear what you are asking. Is this a div that covers the whole screen and you don't want it's contents to scroll? If it's an overlay (as the class suggests), is it sometimes shown and sometimes hidden? You can use `style="overflow:hidden;"` to always disable scrolling on this div. – nbwoodward Aug 30 '18 at 22:06
  • 1
    Why are you changing style on mouse events? Just add to your CSS. – Fabio Manzano Aug 30 '18 at 22:07
  • Possible duplicate of [Preferred Alternative to OnMouseOver for touch](https://stackoverflow.com/questions/4550427/preferred-alternative-to-onmouseover-for-touch) – Roman Maksimov Aug 30 '18 at 22:07
  • Yes, I am hiding two another divs behind with z-index. It's all part of animation effect. You can check the demo here: https://napvlm.github.io/projects/personal-01/ – Ruslan Anisimov Aug 30 '18 at 22:34

0 Answers0