我试图禁用父母的html/身体滚动条,而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条,同时仍然显示它。
我试图禁用父母的html/身体滚动条,而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条,同时仍然显示它。
当前回答
你不能禁用滚动事件,但是你可以禁用导致滚动的相关操作,比如鼠标滚轮和touchmove:
$('body').on('mousewheel touchmove', function(e) {
e.preventDefault();
});
其他回答
你不能禁用滚动事件,但是你可以禁用导致滚动的相关操作,比如鼠标滚轮和touchmove:
$('body').on('mousewheel touchmove', function(e) {
e.preventDefault();
});
如果覆盖层下的页面可以“固定”在顶部,当你打开覆盖层时,你可以设置
.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));
我之所以建议采用这种方式,只是因为您不需要更改任何滚动事件
粗糙但有效的方法是强制滚动回顶部,从而有效地禁用滚动:
var _stopScroll = false;
window.onload = function(event) {
document.onscroll = function(ev) {
if (_stopScroll) {
document.body.scrollTop = "0px";
}
}
};
打开灯箱时升起旗子,关闭灯箱时降下旗子。
现场测试用例。
我是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();