📌  相关文章
📜  css 防止在覆盖层后面滚动 - CSS (1)

📅  最后修改于: 2023-12-03 15:14:22.752000             🧑  作者: Mango

CSS 防止在覆盖层后面滚动

在 Web 应用程序中，创建覆盖层是一种常见的方式用于模态对话框、下拉菜单等。然而，在覆盖层下方仍然可以滚动页面，这可能导致用户在使用程序时的不适感。在此文中，我们将介绍如何使用 CSS 防止在覆盖层后面滚动。

方案一：使用 position:fixed

可以给 <body> 标签添加样式 position:fixed，这使得该元素不再滚动，并将页面的所有内容都清晰的展示在覆盖层之上。其代码如下：

body {
  position: fixed;
  width: 100%;
}
方案二：使用 overflow:hidden

另一种方法是在创建覆盖层时，将 <body> 标签样式设置为 overflow: hidden。这样一来，通过滚动页面控制的滚动条将消失，无法滚动屏幕，也就避免了任何滚动引起的问题。其代码如下：

body.modal-open {
  overflow: hidden;
}

如果需要在页面上展示多个不同的覆盖层，可以使用一个计数器来进行计数。并在只有一个覆盖层时，将 <body> 标签样式设置为 overflow: hidden，并且在非第一个覆盖层时，设置为 position:fixed。其代码如下：

body.modal-open {
  overflow: hidden;
}

body.modal-open.modal-second,
body.modal-open.modal-third {
  position: fixed;
  width: 100%;
}
总结

以上是两种防止在覆盖层后面滚动的方法。我们可以根据需求来使用。第一种方法适用于需要展示单层覆盖层；而第二种方法则可以用来在同一个页面上同时展示多个覆盖层。