0

好的，使用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();
  });
}
4

1 回答 1

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");
  });
}
于 2013-07-27T08:37:30.607 回答