Prevent body from scrolling but not any parent div on touch devices

Question

I want my body not to scroll if 'not-scroll' class is appended on it, otherwise it should work normally.

I have been searching for this problem for 2 days, but can't find any solution working for me.

What I want is to add a class to body, and it should not scroll if any one try to scroll on it. But every other element should scroll, if scrolling is possible in them. I have already read so many stackoverflow answers, but nothing is workable for me. I have checked out, solution 1,solution 2,solution 3,solution 4 and many others..

PS: Actually, I am implementing fancybox in my application, which opens a model screen on the body, now if user tries to scroll on the model, body behind the model view scrolls. I want to prevent this.

I have tried this.

$(document).on('touchmove',function(event) {
     if($('body').hasClass('no-scroll')) {
         event.preventDefault();
     }
});

but it also prevents scrolling inside model view. Any help would be appreciated!!

Thanks in advance.

Scenario is like shown in picture, captured form iPad mini Image:

You can't prevent scrolling, but you can remove the overflow when the modal is visible. — adeneo, Jul 16 '14 at 10:39

Saksham · Answer 1 · 2014-07-16T11:16:13.393

0

As suggested by adeneo, set overflow to hidden on body on activating the modal.

$('body').css('overflow','hidden');  //set overflow hidden

And when the dialog box closes, add overflow as auto

EDIT: Also, try preventing scroll on overlay ('.fancybox-overlay') rather than body

EDIT-2: Try to include whole of your content inside a wrapper and scroll that instead of the body.(refer THIS).

edited Jul 16 '14 at 11:16

answered Jul 16 '14 at 10:42

Saksham

9,037
7
45
73

This is also preventing scrolling inside any child div of model. – hemkaran_raghav Jul 16 '14 at 10:48
@hemkaran_raghav now check the solution – Saksham Jul 16 '14 at 10:51
I have also tried that, but it arises 2 problems for me, first is, if I will open model after scrolling down the body, it will scroll the body to top. and second is the bouncing effect in iOS. – hemkaran_raghav Jul 16 '14 at 10:53
@hemkaran_raghav try preventing scroll on overlay ('.fancybox-overlay') – Saksham Jul 16 '14 at 10:55

score 0 · Answer 2 · answered Jul 16 '14 at 11:14

0

To prevent scrolling you can specify

body{
   overflow:hidden;
}

To allow scrolling to any other div inside body

div{
   overflow-y:scroll;
}

You can use overflow-y property for vertical , overflow-x property for horizontal or overflow property for both

answered Jul 16 '14 at 11:14

Twix

392
1
12
38

Thanx for the answer. But I cant update my body to have 'overflow:hidden' or 'height:100%'. – hemkaran_raghav Jul 17 '14 at 10:59
1

Does this actually work on iOS7? For me not. Elastic body scrolling is still enabled. And switching it off by document.body.addEventListener( 'touchmove', function(event) {event.preventDefault();}, false ) disables all elements from being scrollable. – Garavani Sep 04 '14 at 07:16

Prevent body from scrolling but not any parent div on touch devices

2 Answers2