Deactivate browser scrollbar using jquery

Question

I have a lightbox displaying various content:

$('.mehr').click(function() {
$('#lightbox').css({'visibility' : 'visible'}).animate({'background-color': 'rgba(0, 0, 0, 0.9)', 'opacity': '1'}, 500);
});

$('.close').click(function() {
$('#lightbox').stop().animate({'background-color': 'rgba(0, 0, 0, 0)', 'opacity': '0'}, 500, function(){$(this).css({'visibility' : 'hidden'});});
});

I need to prevent the user from scrolling when #lightbox is visible. Is there a way to deactivate the browser's scrollbars when #lightbox becomes visible and then reactivate them when #lightbox is closed?

check this: stackoverflow.com/a/7146130/1029433

kaissun
– kaissun

2013-10-29 11:20:23 +00:00
Commented Oct 29, 2013 at 11:20 — kaissun
– kaissun, Commented Oct 29, 2013 at 11:20

Sridhar R · Accepted Answer · 2013-10-29 11:16:40Z

4

this code hide the scroll using css

body {
   overflow: hidden;
}

In JQuery

$("body").css("overflow", "hidden");

For Internet Explorer 6, just overflow the html

$("html").css("overflow", "hidden");

answered Oct 29, 2013 at 11:16

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kaissun Over a year ago

In this case it will be hidden and deactivated

secelite · Accepted Answer · 2013-10-29 11:23:14Z

0

While setting the overflow attribute to hidden just hides the scrollbar you can "lock" the current scrollposition with jQuery like this:

$('.mehr').click(function() {
$('#lightbox').css({'visibility' : 'visible'}).animate({'background-color': 'rgba(0, 0, 0, 0.9)', 'opacity': '1'}, 500);
lockPosition = $(document).scrollTop();
    $(window).on('scroll', function(e) {
        $(this).scrollTop(lockPosition);
    });
});

$('.close').click(function() {
$('#lightbox').stop().animate({'background-color': 'rgba(0, 0, 0, 0)', 'opacity': '0'}, 500, function(){$(this).css({'visibility' : 'hidden'});});
    $(window).unbind('scroll');
    });
});

FIddle: http://jsfiddle.net/3kjzr/

answered Oct 29, 2013 at 11:23

secelite

1,3381 gold badge11 silver badges19 bronze badges

Collectives™ on Stack Overflow

Deactivate browser scrollbar using jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related