CODEWITHSUNDEEP
javascripthtmlmobiletouch
Matthew Jonat
Matthew Jonat

Reputation: 307

Disable scroll until div is hidden on mobile

So if this has been answered then please direct me to the correct place...I think most of the reason I cant find the answer to this is because I cant figure out how to ask it properly haha.

I'm building a mobile website. Check out nim.matthewjonat.com then inspect with chrome and push ctrl+shift+m and then you'll be in a similar environment to me without having to look at a mobile.

I have a div which goes over everything and there is an arrow at the bottom which you need to click to look at the rest of the site.

What I'm thinking though is that if you first visit the page on a mobile you are going to instinctively want to scroll before you figure out you need to click the arrow. This is fine but if you scroll even while that first div is there (it is position:fixed) the content underneath scrolls but that first div just sits there so you could potentially be at the bottom of the page before you figure out you have to click the arrow to see the site.

I'm guessing this will involve some form of javascript which is fine. I'm just really not sure where to look....

The thing is I'm not even sure its the scrolling I want to disable seeing as its a mobile? Do I need to disable some kind of touch event until someone has clicked the arrow?

Thanks in advance!

Matt

Upvotes: 0

Views: 217

Answers (1)

elzi
elzi

Reputation: 5672

I'd do it with CSS, starting at the body element.

  body.show-overlay {
    overflow:hidden; 
  }
  body.show-overlay .overlay {
    display:block;
  }
  .overlay {
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background-color: rgba(0,0,0, 0.75);
  }

When the body has the class show-overlay, overflow will be hidden and the overlay will show. Then use JS for the click event handler to remove the class from the body

document.getElementById('close-overlay').addEventListener('click', function (event) {
    var body = document.body;
    var className = 'show-overlay';

    if (body.classList) {
      body.classList.remove(className);
    }
    else {
      body.className = body.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
})

Upvotes: 1

Related Questions