我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
当前回答
我注意到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网站上进行了实战测试
这似乎是一个成熟的解决方案，当然也是我能找到的最好的解决方案。包装有点重，但我猜大部分都是分开的，当只进口铁卷轴管理器。
干杯
其他回答
我喜欢坚持使用“overflow: hidden”方法，只需添加与滚动条宽度相等的右填充。
通过lostsource获取滚动条宽度函数。
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
当显示覆盖时，在html中添加"noscroll"类，并在body中添加padding-right:
$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");
当隐藏时，删除类和填充:
$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);
noscroll样式是这样的:
.noscroll { overflow: hidden; }
注意，如果你有任何带有position:fixed的元素，你也需要为这些元素添加填充。
这对我来说真的很好....
// 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);
});
我已经做了这个函数，用JS解决了这个问题。 这个原则可以很容易地扩展和定制，这对我来说是一个很大的优势。
使用这个js DOM API函数:
const handleWheelScroll = (element) => (event) => {
if (!element) {
throw Error("Element for scroll was not found");
}
const { deltaY } = event;
const { clientHeight, scrollTop, scrollHeight } = element;
if (deltaY < 0) {
if (-deltaY > scrollTop) {
element.scrollBy({
top: -scrollTop,
behavior: "smooth",
});
event.stopPropagation();
event.preventDefault();
}
return;
}
if (deltaY > scrollHeight - clientHeight - scrollTop) {
element.scrollBy({
top: scrollHeight - clientHeight - scrollTop,
behavior: "smooth",
});
event.stopPropagation();
event.preventDefault();
return;
}
};
简而言之，如果滚动要滚动给定元素(您想要滚动的元素)之后的其他内容，则此函数将停止事件传播和默认行为。
然后你可以像这样把它勾起来和解开:
const wheelEventHandler = handleWheelScroll(elementToScrollIn);
window.addEventListener("wheel", wheelEventHandler, {
passive: false,
});
window.removeEventListener("wheel", wheelEventHandler);
注意，它是一个高阶函数，所以必须保持对给定实例的引用。
我在鼠标进入中挂钩addEventListener部分，在鼠标离开事件中取消挂钩removeEventListener，但你可以随心所欲地使用它。
所有基于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事件。
