问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

打开模式时防止 BODY 滚动

社区维基
1
新手上路，请多包涵

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

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

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

和

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

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

原文由 xorinzor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjquerycssscroll
阅读 1.1k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

 body.modal-open {
 overflow: hidden;
 }

您可能会争辩说上面的代码属于 Bootstrap CSS 代码库，但这是将其添加到您的站点的简单修复。

2013 年 2 月 8 日更新

现在，这在 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 日更新

看起来 modal-open 类将在 Bootstrap 3.0 中返回，明确用于防止滚动：

在 body 上重新引入 .modal-open（这样我们就可以在那里对滚动条进行核对）

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

原文由 MartinHN 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

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

此 CSS 将阻止背景页面在模态下滚动：

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

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

如果您知道您的视口（ 我的用于将视口添加到 <body> 的插件），您只需为 position 添加一个 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。

原文由 Brad 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题