我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
当前回答
我用scrollLock方法解决了这个问题，该方法为滚动轮事件和按下键事件设置侦听器，并使用preventScroll方法处理这些事件。就像这样:
preventScroll = function (e) {
// prevent scrollwheel events
e.preventDefault();
e.stopPropagation();
// prevent keydown events
var keys = [32, 33, 34, 35, 37, 38, 39, 40];
if (keys.includes(e.keyCode)) {
e.preventDefault();
}
return false;
}
scrollLock = function (lock) {
if (lock) {
document.querySelector("#container").addEventListener("wheel", preventScroll);
document.addEventListener("keydown", preventScroll);
}
else {
document.querySelector("#container").removeEventListener("wheel", preventScroll);
document.querySelector("#container").removeEventListener("keydown", preventScroll);
}
}
其他回答
我喜欢坚持使用“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的元素，你也需要为这些元素添加填充。
你可以用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 > < /
我在我自己的灯箱实现中就是这样做的。目前看来还不错。
<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%。
这将通过保存滚动位置并在启用滚动时恢复它来阻止视口跳转到顶部。
CSS
.no-scroll{
position: fixed;
width:100%;
min-height:100vh;
top:0;
left:0;
overflow-y:scroll!important;
}
JS
var scrollTopPostion = 0;
function scroll_pause(){
scrollTopPostion = $(window).scrollTop();
$("body").addClass("no-scroll").css({"top":-1*scrollTopPostion+"px"});
}
function scroll_resume(){
$("body").removeClass("no-scroll").removeAttr("style");
$(window).scrollTop(scrollTopPostion);
}
现在需要做的就是调用函数
$(document).on("click","#DISABLEelementID",function(){
scroll_pause();
});
$(document).on("click","#ENABLEelementID",function(){
scroll_resume();
});
你可以用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事件。
