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

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

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


当前回答

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

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

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

其他回答

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

.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的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>

你可以用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事件。

我注意到YouTube网站就是这么做的。所以通过检查它一点,我已经能够确定他们正在使用@聚合物/铁覆盖-行为,幸运的是,它可以在web组件/聚合物之外使用:

import {
    pushScrollLock,
    removeScrollLock,
} from '@polymer/iron-overlay-behavior/iron-scroll-manager';

// lock scroll everywhere except scrollElement
pushScrollLock(scrollElement);

// restore scrolling
removeScrollLock(scrollElement);

允许滚动选定的元素 不会以任何方式干扰样式 是否在YouTube网站上进行了实战测试

这似乎是一个成熟的解决方案,当然也是我能找到的最好的解决方案。包装有点重,但我猜大部分都是分开的,当只进口铁卷轴管理器。

干杯

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

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