CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapscrolldisabled-control
Filippo oretti
Filippo oretti

Reputation: 49813

JS - jQuery - Tw Bootstrap - block user to scroll body but show scroll bars

Ok, using overflow:hidden; the page don't scroll and don't shows scrollbars.

What i would like to achieve is to disable body from scrolling but showing scrollbars, like to make scrollbars static/disabled without having to hide them.

I need to make user able to scroll inside a modal but at same time he should not scroll the page while scrolling modal.

Is it possible without hiding body scrollbars?

thanks a lot, i'm in trouble and i can't get a decent code :/ my js looks like this (but this hides body scrollbars and i want to show them anyway :/ )

function blockScrolling(){
  var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
      ];
      var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
      html.data('scroll-position', scrollPosition);
      html.data('previous-overflow', html.css('overflow'));
      html.css('overflow', 'hidden');
      window.scrollTo(scrollPosition[0], scrollPosition[1]);

}
function unblockScrolling(){
   // un-lock scroll position
      var html = jQuery('html');
      var scrollPosition = html.data('scroll-position');
      html.css('overflow', html.data('previous-overflow'));
      window.scrollTo(scrollPosition[0], scrollPosition[1])
}
function modals(){
  $('.modal').hide();
  $('.modal').on('show shown',function(){
    blockScrolling();

  });
  $('.modal').on('hide hidden',function(){
    unblockScrolling();
  });
}

Upvotes: 0

Views: 757

Answers (1)

Patrick Evans
Patrick Evans

Reputation: 42736

Just set a scroll event and put the scrollTop back to 0 or the last known position, then unbind the scroll event when done.

function modals(){
  $('.modal').hide();
  $('.modal').on('show shown',function(){
    var top = $("body").scrollTop();
    (function(pos) {
        $(window).scroll(function(e) {
           $("body").scrollTop( 0 );
           //OR
           $("body").scrollTop( pos );
        });
    })(top);
  });
  $('.modal').on('hide hidden',function(){
    $(window).unbind("scroll");
  });
}

Upvotes: 1

Related Questions