覆盖滚动禁用

2023-12-10

So, I have an overlay like below (screenshot from example site).enter image description here

当菜单(A 部分)打开时,它会在主 div(B 部分)上显示一个覆盖层。

但是,当菜单打开时,我仍然可以滚动主 div。

有没有办法在打开菜单(覆盖层)时禁用主 div(B 部分)上的滚动?

Thanks!


这是可以做到的。 HTML:

<div class="overlay">
    <div class="overlay-content">
        <p>I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance. If Coleman Reese isn't dead in 60 minutes then I blow up a hospital.</p>

        <p>You can swapnot sleeping in a penthouse... for not sleeping in a mansion. Whenever you stitch yourself up, you do make a bloody mess.</p>

        <p>I'm Batman</p>

        <p>Does it come in black?</p>

        <p>Breathe in your fears. Face them. To conquer fear, you must become fear. You must bask in the fear of other men. And men fear most what they cannot see. You have to become a terrible thought. A wraith. You have to become an idea! Feel terror cloud your senses. Feel its power to distort. To control. And know that this power can be yours. Embrace your worst fear. Become one with the darkness.</p>

        <p>You either die a hero or you live long enough to see yourself become the villain.</p>
    </div>
</div>

<div class="background-content">
        <p>I had a vision of a world without Batman. The Mob ground out a little profit and the police tried to shut them down one block at a time. And it was so boring. I've had a change of heart. I don't want Mr Reese spoiling everything but why should I have all the fun? Let's give someone else a chance. If Coleman Reese isn't dead in 60 minutes then I blow up a hospital.</p>

        <p>You can swapnot sleeping in a penthouse... for not sleeping in a mansion. Whenever you stitch yourself up, you do make a bloody mess.</p>

        <p>I'm Batman</p>

        <p>Does it come in black?</p>

        <p>Breathe in your fears. Face them. To conquer fear, you must become fear. You must bask in the fear of other men. And men fear most what they cannot see. You have to become a terrible thought. A wraith. You have to become an idea! Feel terror cloud your senses. Feel its power to distort. To control. And know that this power can be yours. Embrace your worst fear. Become one with the darkness.</p>

        <p>You either die a hero or you live long enough to see yourself become the villain.</p>
</div>

CSS:

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);
}
.overlay .overlay-content {
    height: 100%;
    overflow: scroll;
}


.background-content{
    height: 100%;
    overflow: auto;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

覆盖滚动禁用 的相关文章

随机推荐

  • 如何使用 Prolog 删除列表中的偶数

    我需要删除第一个列表中的所有偶数并将其余的保存到第二个列表中 我的第一个非工作方法是 remove even remove even H1 T1 H2 T2 H1 mod 2 0 remove even T1 remove even H1
  • 在SQL中批量插入.txt文件

    我正在尝试将 txt 文件导入高级查询工具 我使用的 SQL 客户端 到目前为止 我有 CREATE TABLE tb test id INTEGER name varchar 10 dob date city char 20 state
  • 使用 C# .NET 中的 XDocument 库删除内部节点,但不删除 xml 中的值

    我有以下 XML 文件 p span class screenitems Add span p 我要删除它 span 节点但是Add存在 所以最后看起来如下 p Add p 有没有好的 简单的方法来做到这一点 Use ReplaceWith
  • VS 2015许可证已过期

    我昨天 2015年7月21日 从我的MSDN帐户下载了VS 2015 enterprise 发布版 并将其安装在全新的W8 1 pro机器上 是的 遗憾的是 我无法将Win8 1 Pro升级到Enterprise https superus
  • “索引包失败”

    在克隆 git 存储库时 我收到一条我不太明白的错误消息 git clone email protected group07 Initialized empty Git repository in cygdrive C Users Mart
  • 拉取全局环境中具有特定属性的所有对象

    假设我有一个全局环境中的对象列表 我如何只提取那些具有特定属性集的内容 x1 lt 1 10 x2 lt 1 10 x3 lt 1 10 x4 lt 1 10 x5 lt 1 10 attr x1 foo lt bar attr x5 fo
  • 每次导入 Tensorflow 时都会发出警告 - “未找到 cudart64_101.dll”。有没有办法只消除这个警告?

    2021 01 26 17 13 35 314383 W tensorflow stream executor platform default dso loader cc 55 Could not load dynamic library
  • 使用迭代参数的 SSRS 创建报告

    我正在修改现有的报告 该报告设置为让您查看每个销售代表的统计信息 您可以通过更改参数来完成此操作sales rep在报告视图中 我需要修改报告 以便它可以为每个销售代表显示一个页面 然后 该数据将导出到 Excel 每个销售代表的统计数据将
  • 无法在 R 上加载 rJava

    我希望在 R x64 3 1 2 中加载 rJava 操作系统 Windows 8 1 64 位 虽然安装似乎工作正常 gt install packages rJava Installing package into C Users so
  • 使用 Rails 多态性进行嵌套注释

    我需要在 Rails 3 应用程序中构建一个嵌套评论系统 允许对许多模型 文章 帖子等 进行评论 并且正在讨论按照以下方式滚动我自己的解决方案这个帖子 有可用的宝石 例如acts as commentable with threading
  • 访问远程 bean 时 CORBA 内部出现异常

    在装有 Glassfish 4 0 和 JDK 1 7 55 的 Windows Server 上 我收到 NoClassDefFoundError 和 ClassNotFoundException 然后调用远程 bean 方法 Stand
  • Xpath:查找类包含空格的元素

    所以我有看起来像这样的元素 li class attribute li note the space li class attribute li 使用 xpath li class attribute 将获得第二个元素但不是第一个 如何获得
  • 数据表 - 数据表外部的搜索框

    我正在使用数据表 数据表网 并且我希望我的搜索框位于表格之外 例如在我的标题 div 中 这可能吗 您可以使用 DataTables api 来过滤表 因此 您所需要的只是您自己的输入字段 其中包含一个 keyup 事件 该事件会触发 Da
  • 使用 R 计算时间序列中的间隙大小

    假设我有一个包含时间序列的数据框 如下所示 Date value 2000 01 01 00 00 00 4 6 2000 01 01 01 00 00 N A 2000 01 01 02 00 00 5 3 2000 01 01 03 0
  • 本地部署和从应用商店部署时的不同应用行为

    从 Windows 应用商店 测试版 部署应用程序时 我遇到奇怪的问题 该应用程序被编写为 Windows Phone 8 1 RunTime 我有一个用 C C 编写的小型 Windows 运行时组件 用于检查文件是否存在 bool Fi
  • 如何在golang中将变量id传递给statement.Query()?

    我在 postgres 中有这个查询 它根据传递的参数查询 1 或 n 个用户 select name phone from clients where id in id1 id2 现在 当我尝试在 golang 中使用它时 我在如何将这种
  • 二元决策树(CART)的分裂和根节点

    如何在回归树中找到分割和根节点 我从多个向量制作了回归树 现在我必须提取多个向量的 rpart 的根节点 文件包含多个向量的数值A B C D E F G H前任 向量包含 4 3 6 7 2 4 5 等等类似的其他 B C D E F G
  • PutSql - 日期格式错误

    我正在尝试从 Teradata 读取数据并将其填充到 Oracle 数据库 请在下面找到我的流程 ExecuteSQL gt SplitAvro gt ConvertAvroToJSON gt ConvertJSONToSQL gt Put
  • 从Python中不同类中的类调用方法

    假设我有这个代码 class class1 object def init self don t worry about this def parse self array do something with array class cla
  • 覆盖滚动禁用

    So I have an overlay like below screenshot from example site 当菜单 A 部分 打开时 它会在主 div B 部分 上显示一个覆盖层 但是 当菜单打开时 我仍然可以滚动主 div