我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
一个对我有用的简单解决方案(暂时禁用窗口滚动)。
基于此提琴:http://jsfiddle.net/dh834zgw/1/
下面的代码片段(使用jquery)将禁用窗口滚动:
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');
在你的css中:
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}
现在,当你删除模态时,不要忘记删除html标签上的noscroll类:
$('html').toggleClass('noscroll');
其他回答
还有另一个解决方案!
而不是使用多个事件监听器和添加,停止和关闭它们,你可以只添加一次回调监听器,其中你可以在你的函数中共享事件,只在需要的时候调用preventDefault等等,甚至实现自己的事件优先级系统。
只需在body中添加一个类即可:
.stop-scrolling {
height: 100%;
overflow: hidden;
}
添加类,然后删除当你想重新启用滚动,测试在IE, FF, Safari和Chrome。
$('body').addClass('stop-scrolling')
对于移动设备,你需要处理touchmove事件:
$('body').bind('touchmove', function(e){e.preventDefault()})
并取消绑定以重新启用滚动。在iOS6和Android 2.3.3测试
$('body').unbind('touchmove')
在我看来,取消事件是一个可怕的方法:/
相反,我使用position: fixed;上图:-scrollTop ();在下面。
演示:https://jsfiddle.net/w9w9hthy/5/
从我的jQuery弹出项目:https://github.com/seahorsepip/jPopup
//Freeze page content scrolling
function freeze() {
if($("html").css("position") != "fixed") {
var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
if(window.innerWidth > $("html").width()) {
$("html").css("overflow-y", "scroll");
}
$("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
}
}
//Unfreeze page content scrolling
function unfreeze() {
if($("html").css("position") == "fixed") {
$("html").css("position", "static");
$("html, body").scrollTop(-parseInt($("html").css("top")));
$("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
}
}
这段代码考虑了宽度、高度、滚动条和页面跳转问题。
上述代码可能解决的问题:
宽度,当设置位置固定的HTML元素宽度可以小于100% 高度,同上 滚动条,当设置位置固定时,页面内容不再有滚动条,即使它在水平页面跳转之前有滚动条 页面跳转,当设置位置固定时,页面滚动顶部不再有效,导致垂直页面跳转
如果任何人对上面的页面冻结/解冻代码有任何改进,请告诉我,这样我就可以将这些改进添加到我的项目中。
我知道这是一个老问题,但我不得不做一些非常相似的事情,在花了一段时间寻找答案并尝试了不同的方法后,我最终使用了一个非常简单的解决方案。
我的问题非常相似,几乎相同,唯一的区别是我不需要实际显示滚动条-我只需要确保它的宽度仍然被使用,所以当我的覆盖显示时,页面的宽度不会改变。
当我开始滑动覆盖到屏幕,我做:
$('body').addClass('stop-scrolling').css('margin-right', 8);
在我将覆盖层从屏幕上滑动后,我这样做:
$('body').removeClass('stop-scrolling').css('margin-right', 0);
重要:这是完美的工作,因为我的叠加是绝对定位,对:0px时可见。
对我来说,这并没有带来任何内容跳跃。
禁用滚动:
this.htmlBody = $('body')
this.scrollPos = document.documentElement.scrollTop
this.htmlBody.css('top', -this.scrollPos + 'px').addClass('disable-scroll')
重新启用滚动:
this.htmlBody.removeClass('disable-scroll')
$(window).scrollTop(this.scrollPos)
而CSS:
body.disable-scroll {
position: fixed;
width: 100%;
}