防止 BODY 在模式打开时滚动

javascript jquery css scroll

2022-08-29 23:26:43

我希望我的身体在使用鼠标滚轮时停止滚动，同时打开我网站上的模态（从 http://twitter.github.com/bootstrap）。

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

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

和

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

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

答案 1

Bootstrap's 会在显示模式对话框时自动将类添加到正文中，并在对话框隐藏时将其删除。因此，您可以将以下内容添加到 CSS 中：modalmodal-open

body.modal-open {
    overflow: hidden;
}

你可以争辩说上面的代码属于Bootstrap CSS代码库，但这是一个简单的修复程序，可以将其添加到你的网站。

更新 8th Feb， 2013
这现在已经停止在Twitter Bootstrap v. 2.3.0中工作 - 他们不再将类添加到正文中。modal-open

解决方法是在即将显示模态时将类添加到主体中，并在模式关闭时将其删除：

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

更新 2013 年 3 月 11 日看起来该类将在 Bootstrap 3.0 中返回，明确用于防止滚动：modal-open

在身体上重新引入.modal-open（因此我们可以在那里对卷轴进行核弹）

请参阅此内容：https://github.com/twitter/bootstrap/pull/6342 - 查看模态部分。

答案 2

被接受的答案在移动设备上不起作用（至少是iOS 7 w / Safari 7），我不希望MOAR JavaScript在我的网站上运行，而CSS会这样做。

此 CSS 将阻止后台页面在模式下滚动：

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

但是，它也有轻微的副作用，基本上滚动到顶部。解决了这个问题，但重新引入了在移动设备上滚动的功能。position:absolute

如果您知道您的视口（我的插件用于将视口添加到<体>），您只需为.position

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帖子。