我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
我正在使用scrollTo jQuery插件,想知道是否有可能通过Javascript暂时禁用窗口元素上的滚动?我想禁用滚动的原因是,当你滚动而scrollTo是动画,它变得非常难看;)
当然,我可以做$("body").css("overflow", "hidden");然后当动画停止时把它放回自动,但如果滚动条仍然可见但不活跃会更好。
当前回答
我使用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();
});
其他回答
使用Javascript函数切换overflowY,同时切换移动菜单的可见性。比如这个:
function handleClickMobileMenu() {
document.body.style.overflowY = isMobileMenuOpen ? "hidden" : "scroll";
//...
}
在打开和关闭移动菜单时调用该函数。 最好的用例是当你的移动菜单是完全视口区域。
为了防止跳楼,我用了这个
export function toggleBodyScroll(disable) {
if (!window.tempScrollTop) {
window.tempScrollTop = window.pageYOffset;
// save the current position in a global variable so I can access again later
}
if (disable) {
document.body.classList.add('disable-scroll');
document.body.style.top = `-${window.tempScrollTop}px`;
} else {
document.body.classList.remove('disable-scroll');
document.body.style.top = `0px`;
window.scrollTo({top: window.tempScrollTop});
window.tempScrollTop = 0;
}
}
在CSS中
.disable-scroll {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
我在另一个网站上找到了答案:
禁用滚动:
$( ".popup").live({
popupbeforeposition: function(event, ui) {
$("body").on("touchmove", false);
}
});
关闭后弹出窗口释放滚动:
$( ".popup" ).live({
popupafterclose: function(event, ui) {
$("body").unbind("touchmove");
}
});
var winX = null;
var winY = null;
window.addEventListener('scroll', function () {
if (winX !== null && winY !== null) {
window.scrollTo(winX, winY);
}
});
function disableWindowScroll() {
winX = window.scrollX;
winY = window.scrollY;
}
function enableWindowScroll() {
winX = null;
winY = null;
}
我使用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();
});