2

I was wondering how does Facebook handles the browser scroll when one opens an image for a larger view. It seems the scroll gets disabled but remains visible (the element container). I want to create a similar behaviour on a website, so that when I call the overlay to display the image the scroll gets "disabled" to avoid people from scrolling and loosing sight of the overlay.

yoda
  • 10,834
  • 19
  • 64
  • 92

2 Answers2

1

What you have to do is simply set

document.body.style.overflow = 'hidden';

whilst you don't want the user to be able to scroll, then revert to 

document.body.style.overflow = '';

when you do.

Here is a demo (clicking it switches between the two states)

Paul S.
  • 64,864
  • 9
  • 122
  • 138
  • I was actually interested in knowing how to make the rectangular scroll handler disapear and mantain the container and arrows, like Facebook does. – yoda May 07 '13 at 18:04
  • Try to open one image in facebook, and you'll see that not only the scroll stops as there are some scroll elements that dissapear, as if there was no need to scroll. – yoda May 08 '13 at 18:07
0

I have found an answer, working exactly like facebook's scroll. The answer originally was posted by 'Patrick DaVader' and I think it's worth sharing it:

To turn OFF scrolling try this:

var current = $(window).scrollTop();

$(window).scroll(function() {
    $(window).scrollTop(current);
});

to reset:

$(window).off('scroll');

Link where I found it: How to programmatically disable page scrolling with jQuery

Community
  • 1
  • 1
Torben
  • 479
  • 6
  • 16