我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
我对Bootstrap 3的解决方案:
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}
因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动，因为原始的右距:15px。
其他回答
在StackOverflow上做了8-10个小时的研究后，我找到了一个可行的解决方案。
突破
$('.modal').is(':visible');
因此，我已经构建了一个函数来检查是否有任何模态是打开的，它将定期添加类*modal-open**到
setInterval(function()
{
if($('.modal').is(':visible')===true)
{
$("body").addClass("modal-open");
}
else
{
$("body").removeClass("modal-open");
}
},200);
这里使用$(".modal")的原因是所有的模态(在Bootstrap中)都使用类modal (fade/show是根据状态而定)
所以我的模态现在运行完美没有身体得到滚动。
这在GitHub中也是一个bug/闻所未闻的问题，但没有人打扰。
这是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();
}
};
我对这段代码不太确定，但值得一试。
jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});
就像我之前说过的，我不是百分百确定，但还是试一试吧。
对于那些想知道如何获得滚动事件的引导3模态:
$(".modal").scroll(function() {
console.log("scrolling!);
});
你可以使用下面的逻辑，我测试了它，它可以工作(即使在IE中)
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(function(){
$('#locker').click(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
$('#unlocker').click(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
})
</script>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
