我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
下面是我在React中修复这个问题的方法:
useEffect(() => {
if (isShown) {
const width = document.body.clientWidth;
document.body.style.overflow = "hidden";
document.body.style.width = `${width}px`;
} else {
document.body.style.overflow = "visible";
document.body.style.width = `auto`;
}
return () => {
document.body.style.overflow = "visible";
document.body.style.width = `auto`;
};
}, [isShown]);
其他回答
$('.modal').on('shown.bs.modal', function (e) {
$('body').css('overflow-y', 'hidden');
});
$('.modal').on('hidden.bs.modal', function (e) {
$('body').css('overflow-y', '');
});
下面是我在React中修复这个问题的方法:
useEffect(() => {
if (isShown) {
const width = document.body.clientWidth;
document.body.style.overflow = "hidden";
document.body.style.width = `${width}px`;
} else {
document.body.style.overflow = "visible";
document.body.style.width = `auto`;
}
return () => {
document.body.style.overflow = "visible";
document.body.style.width = `auto`;
};
}, [isShown]);
对于那些使用SharePoint 2013的人，有一个小提示。主体已经有overflow: hidden。你要找的是设置overflow:隐藏在id为s4-workspace的div元素上，例如。
var body = document.getElementById('s4-workspace');
body.className = body.className+" modal-open";
如果modal的高度/宽度为100%，“mouseenter/leave”可以很容易地启用/禁用滚动。这对我来说真的很管用:
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$("#myModal").mouseenter(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
}).mouseleave(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
});
这是TypeScript中的一种解决方案，可以轻松地阻止事件扩展，也可以处理移动设备。当禁用垂直滚动条时，这也不会导致水平跳转。 只需使用底部的导出函数，例如任何HTML元素上的onclick处理程序。如果不是在NodeJS环境中运行，只需删除该进程。客户端检查。
/**
* Handles scroll events for modal content
*/
const events = [
'DOMMouseScroll',
'mousewheel',
'wheel',
'touchmove',
'keydown',
'mousedown',
'scroll',
];
const preventDefault = (e: Event) => {
e.preventDefault();
e.stopPropagation();
return false;
};
let currentY: number;
const disableScroll = () => {
currentY = window.scrollY;
events.forEach((event) => {
window.addEventListener(event, preventDefault, {
passive: false,
});
});
const bodyStyle = document.body.style;
bodyStyle.setProperty('touch-action', 'none');
bodyStyle.setProperty('position', 'fixed');
bodyStyle.setProperty('overflow-y', 'scroll');
bodyStyle.setProperty('width', '100%');
bodyStyle.setProperty('top', `-${currentY}px`);
};
const enableScroll = () => {
events.forEach((event) => {
window.removeEventListener(event, preventDefault);
});
const bodyStyle = document.body.style;
bodyStyle.removeProperty('touch-action');
bodyStyle.removeProperty('position');
bodyStyle.removeProperty('overflow-y');
bodyStyle.removeProperty('width');
bodyStyle.removeProperty('top');
window.scroll(0, currentY);
};
/**
* Makes a component (e.g. popup) modal
*/
export const makeModal = () => {
if (process.client) {
disableScroll();
}
};
/**
* Makes a component (e.g. popup) non-modal
*/
export const makeNonModal = () => {
if (process.client) {
enableScroll();
}
};
