我想让我的身体在使用鼠标滚轮时停止滚动,而我的网站上的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); } }); }) });

其他回答

不幸的是,上面的答案没有一个能解决我的问题。

在我的情况下,网页原本有一个滚动条。每当我点击模态,滚动条不会消失,标题会向右移动一点。

然后我尝试添加.modal-open{overflow:auto;}(大多数人都推荐)。它确实解决了问题:滚动条出现后,我打开模式。然而,另一个副作用出现了,那就是“标题下面的背景会向左移动一点,在模态后面还有一个长条”

幸运的是,在添加{padding-right: 0 !important;}之后,一切都被完美地修复了。标题和正文背景都没有移动,模态仍然保持滚动条。

希望这可以帮助那些仍然被这个问题困扰的人。好运!

对于那些使用SharePoint 2013的人,有一个小提示。主体已经有overflow: hidden。你要找的是设置overflow:隐藏在id为s4-workspace的div元素上,例如。

var body = document.getElementById('s4-workspace');
body.className = body.className+" modal-open";

你可以使用下面的逻辑,我测试了它,它可以工作(即使在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>

我必须设置视口高度才能让它完美工作

body.modal-open {
  height: 100vh;
  overflow: hidden;
}

为什么不像布尔玛那样做呢? 当modal is-active时,将它们的类.is-clipped添加到html中,即overflow: hidden!important; 就是这样。

编辑:好的,Bulma有这个bug,所以你必须添加其他东西,比如

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}