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

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

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


当前回答

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

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

其他回答

你可以用overflow: hidden隐藏正文的滚动条,同时设置一个边距,这样内容就不会跳转:

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

然后你可以在页面上添加一个禁用的滚动条来填补空白:

textarea { overflow-y:滚动; overflow-x:隐藏; 宽度:11 px; 大纲:没有; 调整:没有; 位置:固定; 上图:0; 右:0; 底部:0; 边界:0; } textarea > < textarea > < /

我在我自己的灯箱实现中就是这样做的。目前看来还不错。

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

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

将这个类提供给可滚动的主体,您仍然应该看到正确的滚动条,但内容是不可滚动的。

用jquery来保持页面的位置

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

当你关闭覆盖时,只需恢复这些属性

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

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

你可以用Javascript来做:

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

然后当你的灯箱关闭时禁用它。

但如果你的灯箱包含滚动条,你将无法在它打开时滚动。这是因为window包含了body和#lightbox。 所以你必须使用像下面这样的架构:

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

然后只在#global上应用onscroll事件。

我也遇到过类似的问题:左侧菜单出现时,无法滚动。一旦高度设置为100vh,滚动条就会消失,内容会向右抽搐。

因此,如果你不介意保持滚动条启用(但设置窗口全高,这样它实际上不会滚动到任何地方),那么另一种可能性是设置一个小的底部边距,这将保持滚动条显示:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

所有基于javascript的modal/lightbox系统在html标签或body标签上显示modal/lightbox时都会使用溢出。

当lightbox显示时,js会推送一个隐藏在html或body标签上的溢出。 当lightbox被隐藏时,有些人会删除隐藏的,有些人会在html或body标签上推一个溢出自动。

在Mac上工作的开发人员没有看到滚动条的问题。

只需替换隐藏的unset不看到内容滑动下的模式删除滚动条。

Lightbox开放/显示:

<html style="overflow: unset;"></html>

Lightbox隐藏/关闭:

<html style="overflow: auto;"></html>