我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
我对这个问题的看法还包括对主体宽度的关注,因为当我们用overflow = "hidden"隐藏滚动条时,页面似乎会跳舞。 下面的代码非常适合我,并且是基于Angular的方法。
element.bind('mouseenter', function() {
var w = document.body.offsetWidth;
document.body.style.overflow = 'hidden';
document.body.style.width = w + 'px';
});
element.bind('mouseleave', function() {
document.body.style.overflow = 'initial';
document.body.style.width = 'auto';
});
其他回答
这个怎么样?(如果你正在使用jQuery)
var $window = $(window);
var $body = $(window.document.body);
window.onscroll = function() {
var overlay = $body.children(".ui-widget-overlay").first();
// Check if the overlay is visible and restore the previous scroll state
if (overlay.is(":visible")) {
var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
window.scrollTo(scrollPos.x, scrollPos.y);
}
else {
// Just store the scroll state
$body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
}
};
在全局变量中存储滚动长度,并在需要时恢复它!
var sctollTop_length = 0;
function scroll_pause(){
sctollTop_length = $(window).scrollTop();
$("body").css("overflow", "hidden");
}
function scroll_resume(){
$("body").css("overflow", "auto");
$(window).scrollTop(sctollTop_length);
}
下面的解决方案是基本的纯JavaScript(没有jQuery):
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){window.scrollTo(x, y);};
}
function enableScrolling(){
window.onscroll=function(){};
}
在我看来,取消事件是一个可怕的方法:/
相反,我使用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% 高度,同上 滚动条,当设置位置固定时,页面内容不再有滚动条,即使它在水平页面跳转之前有滚动条 页面跳转,当设置位置固定时,页面滚动顶部不再有效,导致垂直页面跳转
如果任何人对上面的页面冻结/解冻代码有任何改进,请告诉我,这样我就可以将这些改进添加到我的项目中。
这个答案提出了一个解决方案,用于删除overflow: hidden时发生的“bump”。由于编辑被拒绝,下面是:
要删除overflow: hidden应用时发生的“凹凸”,您可以计算滚动条的宽度并用margin代替它。下面是body元素的例子:
const bodyScrollControls = {
scrollBarWidth: window.innerWidth - document.body.clientWidth,
disable() {
document.body.style.marginRight = `${this.scrollBarWidth}px`;
document.body.style.overflowY = 'hidden';
},
enable() {
document.body.style.marginRight = null;
document.body.style.overflowY = null;
},
};
如果元素已经有右边距,那么获取现有的右边距并为其添加滚动条宽度应该不是问题。