我正在使用scrollTo jQuery插件，想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是，当你滚动而scrollTo是动画，它变得非常难看;)
当然，我可以做$("body").css("overflow"， "hidden");然后当动画停止时把它放回自动，但如果滚动条仍然可见但不活跃会更好。
当前回答
网站我继承了，有一个滚动的链接。为了暂时禁用滚动单击特定按钮，这对我来说是有效的:
$(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() {};
}
其他回答
这段代码将工作在Chrome 56和进一步(原来的答案不再工作在Chrome上)。
使用DomUtils.enableScroll()来启用滚动。
使用DomUtils.disableScroll()禁用滚动。
class DomUtils {
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
static preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
static preventDefaultForScrollKeys(e) {
if (DomUtils.keys[e.keyCode]) {
DomUtils.preventDefault(e);
return false;
}
}
static disableScroll() {
document.addEventListener('wheel', DomUtils.preventDefault, {
passive: false,
}); // Disable scrolling in Chrome
document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
passive: false,
});
}
static enableScroll() {
document.removeEventListener('wheel', DomUtils.preventDefault, {
passive: false,
}); // Enable scrolling in Chrome
document.removeEventListener(
'keydown',
DomUtils.preventDefaultForScrollKeys,
{
passive: false,
}
); // Enable scrolling in Chrome
}
}
这个怎么样?(如果你正在使用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() });
}
};
我使用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();
});
在全局变量中存储滚动长度，并在需要时恢复它!
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);
}
网站我继承了，有一个滚动的链接。为了暂时禁用滚动单击特定按钮，这对我来说是有效的:
$(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() {};
}
