0

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?

Erick
  • 15
  • 1
  • 8
  • 1
    Google "disable scrolling js" > http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily > http://jsbin.com/disable-scrolling/1 – SubjectCurio Apr 13 '15 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 Apr 13 '15 at 14:46

2 Answers2

2

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

body {
 overflow: hidden;
}

Here's an example.

user3818383
  • 170
  • 4
1

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

zdszsdasd
  • 18
  • 4
  • Thanks! If I add overflow:none to the div nothing really happens, overflow-x:hidden works good tho.. I cant really figure out how to add this to the div on mouseclick? I have a button wich triggers a function (onclick="disable_scroll") and the function would look like..? – Erick Apr 13 '15 at 14:53
  • You could use jQuery. $('.button').on('click', function() { $('.div').css('overflow-x', 'hidden'); }); – zdszsdasd Apr 13 '15 at 14:55
  • Thanks, cant get it to work yet tho.. Probably cause I suck at scripting :( I have the following code now: – Erick Apr 13 '15 at 15:41
  • You no longer need the click event handler. Place the following in your function instead: $('body').css('overflow-x', 'hidden'); – zdszsdasd Apr 13 '15 at 16:16
  • Argh, overflow doesnt work on mobile apparently:( It works in browser and this is the way to go tho i think, so thanks.. Ill look in to it soon – Erick Apr 15 '15 at 13:26