javascriptscrollgoogle-plusscroll-lock

Google Plus & Javascript - Disable scrolling when choosing circles?


I've created a lot of Circles. And so when I hover over the "Add to Circles" google plus button, a small div pops up that allows me to vertically scroll through my circles.

The really cool part is that it disable body scrolling. So when I scroll to the bottom of the circles viewer, the body doesn't budge.

How is this possible with javascript?

(I've found a hacky way to do it:

$('body').css({'overflow':'hidden'});
$(document).bind('scroll',function () { 
window.scrollTo(0,0); 
});

But Google does it better. The body scroll bar stays in place (it doesn't vanish like my code makes it), and the body is still unscrollable...)

It's important to note (and so far overlooked) that the scroll bar on the body page has to stay in place. It can't vanish like overflow:hidden makes it, because that jerks all of the page content to the right. Google solves this problem somehow...

SCREENSHOT: enter image description here


Solution

  • Try using :

    $(document).bind('scroll',function (e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });