如何在不隐藏的情况下禁用滚动？

Question

在使用lightbox时，我试图禁用父服务器的html/body滚动条。这里的主要词汇是禁用。我不想用overflow: hidden;来隐藏它。

这样做的原因是，overflow: hidden使站点跳转并占据了滚动区。

我想知道是否有可能在显示滚动条的同时禁用它。

Answer 1

如果覆盖层下的页面可以在顶部“固定”，则打开覆盖层时可以设置

body { position: fixed; overflow-y:scroll }

您仍然应该看到正确的滚动条，但是内容是不可滚动的。关闭覆盖时，只需将这些属性还原为

body { position: static; overflow-y:auto }

我建议这样做只是因为你不需要改变任何滚动事件

更新

您还可以做一些改进:如果您在层打开之前通过javascript获得document.documentElement.scrollTop属性，您可以动态地将该值赋值为body元素的top属性:使用这种方法，无论您是在顶层还是已经滚动过，页面都将处于其位置。

Css

.noscroll { position: fixed; overflow-y:scroll }

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

Answer 2

对接受的解决办法的四个小的添加

1. 在IE中将‘no涡旋’应用于html而不是body，以防止双滚动条
2. 要，在添加‘no涡旋’类之前，检查是否有一个滚动条。否则，该网站也将跳转由新的非滚动条.
3. 为了保持任何可能的scrollTop，使整个页面不会返回到顶部(比如Fabrizio的更新，但是在添加‘no涡旋’类之前，需要获取这个值)
4. 并非所有浏览器处理scrollTop的方式都与http://help.dottoro.com/ljnvjiow.php中记录的方式相同。

似乎适用于大多数浏览器的完整解决方案：

CSS

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

禁用滚动

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

启用滚动

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

感谢法布里齐奥和德扬让我走上正轨，感谢布罗丁戈为双滚动条的解决方案服务。

Answer 3

有了jQuery：

禁用

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

启用

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

用法

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();