我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。
当模式被打开时，我试图调用下面的javascript片段，但没有成功
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。
当前回答
我有一个边栏，是由复选框黑客生成的。 但主要思想是保存文档scrollTop，而不是在滚动窗口期间更改它。
我只是不喜欢页面跳转时，身体变成'溢出:隐藏'。
window.addEventListener('load', function() { let prevScrollTop = 0; let isSidebarVisible = false; document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => { prevScrollTop = window.pageYOffset || document.documentElement.scrollTop; isSidebarVisible = event.target.checked; window.addEventListener('scroll', (event) => { if (isSidebarVisible) { window.scrollTo(0, prevScrollTop); } }); }) });
其他回答
HTML:
<body onscroll="stop_scroll()">
javascript:
function stop_scroll(){
scroll(0,0) ;
}
如果你在stop_scroll()中设置了一个标记(bool)，你可以决定什么时候使用它(如果你只是暂时需要它)。
这将重置滚动每当某些元素溢出主体边界和窗口倾向于滚动(这是完全独立于滚动条;溢出:隐藏与此无关)。
接受的答案不工作在手机上(iOS 7 w/ Safari 7，至少)，我不希望MOAR JavaScript运行在我的网站上，当CSS将做。
这个CSS将阻止后台页面在模式下滚动:
body.modal-open {
overflow: hidden;
position: fixed;
}
然而，它也有一个轻微的副作用，基本上是滚动到顶部。位置:绝对解决了这个问题，但是，重新引入了在移动设备上滚动的能力。
如果你知道你的视口(我的插件为<body>添加视口)，你可以为这个位置添加一个css切换。
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
我还添加了这个，以防止底层页面在显示/隐藏情态动词时左/右跳转。
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
这个答案是x-post。
我对Bootstrap 3的解决方案:
.modal {
overflow-y: hidden;
}
body.modal-open {
margin-right: 0;
}
因为对我来说唯一的溢出:隐藏在身上。模态打开类并没有阻止页面向左移动，因为原始的右距:15px。
这是我的香草JS解决方案基于@jpap jquery:
let bodyElement = document.getElementsByTagName('body')[0];
// lock body scroll
let width = bodyElement.scrollWidth;
bodyElement.classList.add('overflow-hidden');
bodyElement.style.width = width + 'px';
// unlock body scroll
bodyElement.classList.remove('overflow-hidden');
bodyElement.style.width = 'auto';
添加类'is-modal-open'或用javascript修改body标签的样式都是可以的，它会像预期的那样工作。但我们要面对的问题是当body变成overflow:hidden时，它会跳到顶部(scrollTop将变成0)。这将在以后成为一个可用性问题。
作为这个问题的解决方案，而不是改变正文标签溢出:隐藏改变它在html标签
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});
