我正在使用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');
其他回答
我知道这是一个老问题,但我不得不做一些非常相似的事情,在花了一段时间寻找答案并尝试了不同的方法后,我最终使用了一个非常简单的解决方案。
我的问题非常相似,几乎相同,唯一的区别是我不需要实际显示滚动条-我只需要确保它的宽度仍然被使用,所以当我的覆盖显示时,页面的宽度不会改变。
当我开始滑动覆盖到屏幕,我做:
$('body').addClass('stop-scrolling').css('margin-right', 8);
在我将覆盖层从屏幕上滑动后,我这样做:
$('body').removeClass('stop-scrolling').css('margin-right', 0);
重要:这是完美的工作,因为我的叠加是绝对定位,对:0px时可见。
我使用showModalDialog,显示二级页面为模态对话框。
隐藏主窗口滚动条:
document.body.style.overflow = "hidden";
关闭模态对话框时,显示主窗口滚动条:
document.body.style.overflow = "scroll";
从对话框中访问主窗口中的元素:
parent.document.getElementById('dialog-close').click();
仅供任何搜索showModalDialog的人使用:(在原始代码第29行之后)
document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
e.preventDefault();
document.body.style.overflow = "scroll";//****
dialog.close();
});
这个答案提出了一个解决方案,用于删除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;
},
};
如果元素已经有右边距,那么获取现有的右边距并为其添加滚动条宽度应该不是问题。
这个怎么样?(如果你正在使用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() });
}
};
网站我继承了,有一个滚动的链接。为了暂时禁用滚动单击特定按钮,这对我来说是有效的:
$(document).ready(function() {
$('button.class-name').click(function(event) {
disableScroll();
setTimeout(enableScroll, 500);
});
});
function disableScroll() {
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
window.onscroll = function() {
window.scrollTo(scrollLeft, scrollTop);
};
}
function enableScroll() {
window.onscroll = function() {};
}