Is there a simple way to do this? I have a website with a flip animation(on buttonclick), wich has two sides. The frontpage has to cover the viewport height and width. The backpage is a little longer, especially on mobile devices. Unfortunately the length of the backpage causes the frontpage to be the same height. So i have a grey background color area underneath the cover of the frontpage..

My idea was to make the flip button also enable and disable scrolling. I've tried some things but javascript and jquery are not my specialty(at all). So can somebody provide me a little piece of code to add to the flipbutton?

Is there a simple way to do this? I have a website with a flip animation(on buttonclick), wich has two sides. The frontpage has to cover the viewport height and width. The backpage is a little longer, especially on mobile devices. Unfortunately the length of the backpage causes the frontpage to be the same height. So i have a grey background color area underneath the cover of the frontpage..

My idea was to make the flip button also enable and disable scrolling. I've tried some things but javascript and jquery are not my specialty(at all). So can somebody provide me a little piece of code to add to the flipbutton?

• javascript
• jquery
• html
• css
• scroll

• 1 Google "disable scrolling js" > stackoverflow./questions/4770025/… > jsbin./disable-scrolling/1 – SubjectCurio Commented Apr 13, 2015 at 14:12
• Thanks. I allready saw that one though.. Couldnt get it to work unfortunately because you can still scroll on mobile devices.. :( – Erick Commented Apr 13, 2015 at 14:46

2 Answers 2

You'll need to set this on the click event:

body {
 overflow: hidden;
}

Here's an example.

I presume you could set the overflow: none on the div you want to stop scrolling (or the body) when the button is clicked.