当模式打开时，防止BODY滚动

我想让我的身体在使用鼠标滚轮时停止滚动，而我的网站上的Modal(来自http://twitter.github.com/bootstrap)是打开的。

当模式被打开时，我试图调用下面的javascript片段，但没有成功

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

请注意，我们的网站放弃了对IE6的支持，IE7+需要兼容。

当前回答

试试这个:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

这对我很管用。(支持IE8)

其他回答

隐藏溢出和固定位置的技巧，但在我的流体设计中，它会固定它超过浏览器宽度，所以宽度:100%固定。

body.modal-open{overflow:hidden;position:fixed;width:100%}

反应，如果你在寻找

正在弹出的模态中的useEffect

 useEffect(() => {
    document.body.style.overflowY = 'hidden';
    return () =>{
      document.body.style.overflowY = 'auto';
    }
  }, [])

我刚才是这样做的……

$('body').css('overflow', 'hidden');

但当滚轮消失时，它将所有东西都正确移动了20px，所以我添加了

$('body').css('margin-right', '20px');

就在后面。

对我有用。

为我工作

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

你可以试着设置body size为window size, overflow:当modal打开时隐藏

推荐文章