我试图禁用父母的html/身体滚动条,而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。

这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。

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


当前回答

这对我来说真的很好....

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

只需用决定何时锁定滚动的任何东西来包装这两行代码。

e.g.

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

其他回答

另一个在固定模式上摆脱内容跳转的解决方案是,当删除主体滚动时,将页面宽度归一化:

body {width: 100vw; overflow-x: hidden;}

然后你可以玩固定位置或溢出:隐藏的身体时,模式是开放的。但它会隐藏水平滚动条-通常他们不需要响应式网站。

包含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();

你不能禁用滚动事件,但是你可以禁用导致滚动的相关操作,比如鼠标滚轮和touchmove:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

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

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

您应该仍然可以看到右边的滚动条,但是内容是不可滚动的。当你关闭覆盖时,只需恢复这些属性

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

我之所以建议采用这种方式,只是因为您不需要更改任何滚动事件

如果我已经滚动了页面呢?

如果你在层打开之前通过javascript获得document.documentElement.scrollTop属性,你可以动态地将该值赋给body元素的top属性:通过这种方法,页面将保持当前的滚动位置,无论你是在顶部还是已经滚动了。

Css

.noscroll {
  position: fixed; 
  inline-size: 100%;
  overflow-y:scroll 
}

JS

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

<div id="lightbox">在<body>元素中,因此当你滚动lightbox时,你也会滚动body。解决方案是不要将<body>元素扩展到100%以上,将长内容放在另一个div元素中,并在需要时使用overflow: auto为这个div元素添加滚动条。

html { 高度:100% } 身体{ 保证金:0; 高度:100% } #内容{ 高度:100%; 溢出:汽车; } # lightbox { 位置:固定; 上图:0; 左:0; 右:0; 底部:0; } < html > 身体< > <div id="content">much content</div> . < div id = " lightbox " > lightbox < div > 身体< / > < / html >

现在,滚动灯箱(以及主体)没有效果,因为主体不超过屏幕高度的100%。