我试图禁用父母的html/身体滚动条,而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条,同时仍然显示它。
我试图禁用父母的html/身体滚动条,而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条,同时仍然显示它。
当前回答
你不能禁用滚动事件,但是你可以禁用导致滚动的相关操作,比如鼠标滚轮和touchmove:
$('body').on('mousewheel touchmove', function(e) {
e.preventDefault();
});
其他回答
我是OP
在fcalderan回答的帮助下,我能够形成一个解决方案。我把我的解决方案留在这里,因为它带来了如何使用它的清晰度,并增加了一个非常重要的细节,宽度:100%;
我添加了这个类
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
这对我很有用,我用的是fantyapp。
包含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();
如果覆盖层下的页面可以“固定”在顶部,当你打开覆盖层时,你可以设置
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');
我也遇到过类似的问题:左侧菜单出现时,无法滚动。一旦高度设置为100vh,滚动条就会消失,内容会向右抽搐。
因此,如果你不介意保持滚动条启用(但设置窗口全高,这样它实际上不会滚动到任何地方),那么另一种可能性是设置一个小的底部边距,这将保持滚动条显示:
body {
height: 100vh;
overflow: hidden;
margin: 0 0 1px;
}
另一个在固定模式上摆脱内容跳转的解决方案是,当删除主体滚动时,将页面宽度归一化:
body {width: 100vw; overflow-x: hidden;}
然后你可以玩固定位置或溢出:隐藏的身体时,模式是开放的。但它会隐藏水平滚动条-通常他们不需要响应式网站。