JS - jQuery - Tw引导-阻止用户滚动体但显示滚动条

Question

好的，使用overflow:hidden;，页面不滚动，也不显示滚动条。

我想要实现的是禁止身体滚动，但显示滚动条，喜欢使滚动条静态/禁用，而不必隐藏它们。 我需要使用户能够在一个模式内滚动，但同时，他不应该滚动页面，同时滚动模式。

有可能不隐藏身体滚动条吗？

非常感谢，我有麻烦了，我无法得到一个像样的代码:/ /我的js看起来像这样(但是这隐藏了身体滚动条，我无论如何都想展示它们:/ )

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();
  });
}

Answer 1

只需设置一个滚动事件，并将scrollTop返回到0或最后一个已知位置，然后在完成时解除对滚动事件的绑定。

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");
  });
}