Reveal JS 无法在幻灯片中滚动

2024-01-25

我正在使用 Reveal JS 进行演示。

如果我在标签中放置更多文本,它就会隐藏在屏幕下方。但右侧没有滚动条。想知道我是否可以修复 css 以引入垂直滚动条并通过滚动使隐藏内容可见。

这是要更改的CSS(我认为)

.reveal .slides section .fragment {
    opacity: 0;

    -webkit-transition: all .2s ease;
       -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
         -o-transition: all .2s ease;
            transition: all .2s ease;
}
    .reveal .slides section .fragment.visible {
        opacity: 1;
    }

.reveal .slides section .fragment.grow {
    opacity: 1;
}
    .reveal .slides section .fragment.grow.visible {
        -webkit-transform: scale( 1.3 );
           -moz-transform: scale( 1.3 );
            -ms-transform: scale( 1.3 );
             -o-transform: scale( 1.3 );
                transform: scale( 1.3 );
    }

.reveal .slides section .fragment.shrink {
    opacity: 1;
}
    .reveal .slides section .fragment.shrink.visible {
        -webkit-transform: scale( 0.7 );
           -moz-transform: scale( 0.7 );
            -ms-transform: scale( 0.7 );
             -o-transform: scale( 0.7 );
                transform: scale( 0.7 );
    }

.reveal .slides section .fragment.zoom-in {
    opacity: 0;

    -webkit-transform: scale( 0.1 );
       -moz-transform: scale( 0.1 );
        -ms-transform: scale( 0.1 );
         -o-transform: scale( 0.1 );
            transform: scale( 0.1 );
}

    .reveal .slides section .fragment.zoom-in.visible {
        opacity: 1;

        -webkit-transform: scale( 1 );
           -moz-transform: scale( 1 );
            -ms-transform: scale( 1 );
             -o-transform: scale( 1 );
                transform: scale( 1 );
    }

.reveal .slides section .fragment.roll-in {
    opacity: 0;

    -webkit-transform: rotateX( 90deg );
       -moz-transform: rotateX( 90deg );
        -ms-transform: rotateX( 90deg );
         -o-transform: rotateX( 90deg );
            transform: rotateX( 90deg );
}
    .reveal .slides section .fragment.roll-in.visible {
        opacity: 1;

        -webkit-transform: rotateX( 0 );
           -moz-transform: rotateX( 0 );
            -ms-transform: rotateX( 0 );
             -o-transform: rotateX( 0 );
                transform: rotateX( 0 );
    }

.reveal .slides section .fragment.fade-out {
    opacity: 1;
}
    .reveal .slides section .fragment.fade-out.visible {
        opacity: 0;
    }

.reveal .slides section .fragment.semi-fade-out {
    opacity: 1;
}
    .reveal .slides section .fragment.semi-fade-out.visible {
        opacity: 0.5;
    }

.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-green,
.reveal .slides section .fragment.highlight-blue {
    opacity: 1;
}
    .reveal .slides section .fragment.highlight-red.visible {
        color: #ff2c2d
    }
    .reveal .slides section .fragment.highlight-green.visible {
        color: #17ff2e;
    }
    .reveal .slides section .fragment.highlight-blue.visible {
        color: #1b91ff;
    }

我用以下方法解决了这个问题:

.scrollable {
    overflow-y: auto  !important;
    overflow-x: hidden !important;
    height: 700px;
}

将上层类添加到幻灯片标签(部分)以使其可滚动。

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

Reveal JS 无法在幻灯片中滚动 的相关文章

  • Javascript 无法正确排序 DECIMAL 数字

    我有一些代码可以按字母顺序对名称进行排序 我遇到的问题是它处理小数的方式 它对名称进行排序 如下所示 我宁愿它按数字递增 DOG 1 0510 DOG 1 1031 DOG 11 1792 DOG 12 0920 DOG 12 1170 D
  • 重置 div 内容的 css 样式

    有一个用 css 样式定制的 html 页面 我无法更改此 css 该页面的一个标签被设计为动态 html 数据的容器 我怎样才能 重置 这个div的css设置 页面中定义的css样式对此div的内容没有影响 我只能访问动态 html 并且
  • 使用Java获取CSS文件中图像的URL?

    我正在尝试使用 Java 获取远程 CSS 文件中图像 所有 MIME 类型 的 URL 我正在使用 jsoup 来获取 css 的 URL 经过无数个小时的观看CSS解析器 http cssparser sourceforge net 由
  • 从 ES6 模块导入函数表达式或函数声明有什么区别?

    据我了解 参见第 16 3 2 1 节 http exploringjs com es6 ch modules html ES6 允许函数 类导出操作数使用不同的语法 区别在于导出的函数是否需要在导入时解释为函数声明 在这种情况下 您可以编
  • 如何将节点 sqlite3 与 q (promise) 一起使用

    我正在尝试将 Promise 与 sqlite3 一起使用 这是我的源代码的一部分 this deleteTag function tag project var db this db if project return q nfcall
  • Javascript 制作音频 blob

    我正在测试 html 音频标签 我想制作音频 blob url 就像 youtube 或 vimeo 那样 并将其添加到 src 开始播放音频 我一直在测试new Blob and URL createObjectURL 但我不知道如何使用
  • 光标:IE 8 和 9 中的自动行为

    我想要的是为整个正文标记指定cursor pointer 这样页面的背景是可点击的 但我也希望页面的其余部分像以前一样工作 所以我尝试为div设置cursor auto 其中包含这一页 在 FF Chrome 和 safari 中 它工作得
  • Express JS:请求的资源上不存在“Access-Control-Allow-Origin”标头

    我有一个在服务器上运行的 API 和一个连接到它以检索数据的前端客户端 我对跨域问题做了一些研究并使其发挥作用 但我不确定发生了什么变化 我现在在控制台中收到此错误 XMLHttpRequest 无法加载https api mydomain
  • TypeError:cli.init 不是 React Native 的函数

    在 MacBook Air M1 芯片中运行 npx react native init appName 时 TypeError cli init is not a function at run opt homebrew lib node
  • 使用 jquery 更改锚文本和图标

    我有一个隐藏或显示 div 的锚标记 但我无法更改它的文本和图标 如何更改文本和图标标签 因为目前它将图标标签解析为常规文本 锚标记 a class collapse info btn i class icon arrow up icon
  • 处理时区转换的 JavaScript 库

    是否有一个 JavaScript 库可以处理时区转换 并考虑 DST 规则和此类内容 我知道有类似的问题 但我见过的问题似乎都没有真正适合我的问题的答案 我想在时区 A 创建一个日期并能够对其进行操作 添加天数 小时等 然后将其转换为另一个
  • dc lineChart 单击时弹出数据点信息

    我正在尝试检测折线图数据点上的点击 Per this answer dc scatter plot binding onClick event https stackoverflow com a 22772340 1873386 I am
  • 获取输入图像类型选择的图片并加载到图像标签中

    所以 我有一个用于上传 img 文件的输入框 我想要做的是从该数据 或选定的源 中获取数据并将其路由到图像标签的 src 属性中 像这样的东西 http jsfiddle net QC2c4 http jsfiddle net QC2c4
  • UpdatePanel 启动脚本未执行

    我正在编写一个在 SharePoint 网站中使用的 ASP NET Web 部件 并尝试使用 UpdatePanel 来呈现查询结果 我想使用 JQuery 插件来修改从异步回发返回的表 但我无法让启动脚本在异步更新上执行 我发现这个帖子
  • Firefox 上的 jquery 焦点未设置

    我想将焦点设置到我的文本区域 以下是我的代码 this textInput val show focus 但它不起作用 实际上 当我按下鼠标按钮时 它会出现 但是当我松开鼠标时 它会从文本区域中删除 因此 经过大量搜索后 我发现 setTi
  • Jquery Ajax 调用返回 403 状态

    我有一个 jquery Ajax 调用来实现会话的 keepalive 这个 keepAlive 方法将每 20 分钟调用一次 function keepAlive ajax type POST url KeepAliveDummy asp
  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题
  • 如何使用 Chart.js 版本 3.2.1 在圆环图中添加文本

    我正在使用 Canvas 在 HTML 中使用 如何使用在圆环图中添加文本 这是我的 javascript 代码和 HTML 代码 我使用了图表js版本3 2 1 所以请给出相同版本 3 的解决方案 var overallStatsCanv
  • 使用 javascript 从亚马逊 URL 中抓取 ASIN

    假设我有一个像这样的亚马逊产品 URL http www amazon com Kindle Wireless Reading Display Generation dp B0015T963C ref amb link 86123711 2
  • 从“class”名称中删除/替换不需要的前缀信息

    我正进入 状态style从后端 它带有不需要的前缀 我会替换没有前缀的相同内容 正确的方法是什么 这就是我得到的

随机推荐

  • 如何使用户控件部分类了解基类中声明的控件?

    我们是否必须做一些特殊的事情才能让 ASP NET 分部类了解在用户控件的基类中声明的控件 分部类不断为基类中的控件生成声明 这意味着基类中的控件被隐藏并且为空 CodeFileBaseClass 属性可应用于 Page http msdn
  • PostgreSQL 检查数组是否包含左侧数组中的任何元素

    我知道在 PostgreSQL 中你可以运行如下查询 SELECT 1 ANY 1 3 4 7 int AS result检查右侧数组是否包含该元素1 我想知道是否有一种简单的方法来检查右侧数组是否包含来自左手大批 就像是 SELECT 2
  • 使用主干js加载模板

    我开始进行 javascript 开发 并使用 node js 作为休息 API 和使用主干的客户端做了一个简单的项目 一切看起来都很完美 直到我想从我的 js 中获取模板 我发现了不同的方法 其中一些需要一段时间 例如一年 但我不明白哪种
  • 使用 Ember Data 处理服务器端验证

    我在使用 Ember 和 Ember Data 处理服务器端验证时遇到问题 当发生验证错误时 API 返回代码 422 然后 Ember 数据会触发becameInvalid模型上的回调 从这里开始 我不确定处理我遇到的错误的最佳方法是什么
  • $(e.currentTarget) 和 $(this) 之间有区别吗?

    下面两种方法有什么区别吗 1 比 2 快吗 1 selector on click function this do stuff with clicked element and 2 selector on click function e
  • 将参数传递给 IIFE

    将参数传递给存储在变量中的 IIFE 的正确语法是什么 下面的例子告诉我foo未定义 无论我是否调用该函数 var bar function foo return getFoo function return foo foo console
  • 错误 440“数组索引越界”

    我正在尝试下载带有主题关键字的 Excel 附件 我设法创建了一个代码 但有时它给出了错误440 Array Index out of Bounds 代码就卡在这部分了 If Items i Class Outlook OlObjectCl
  • d3.js v4.0 中 d3.scale.category10() 的等效项是什么?

    我正在尝试通过交互式 Web 可视化一书来学习 d3 但 4 0 版本发生了很多变化 我真的无法弄清楚的一件事是是否有 d3 scale category10 的等效项来轻松映射到颜色 新版本中是否有类似的东西 或者我们需要使用 math
  • 向函数传递两个指向同一联合成员​​的指针是否违反了严格的别名规则? [复制]

    这个问题在这里已经有答案了 注意 学习严格的别名规则 请耐心等待 代码示例 t935 c include
  • 使 Loopback API Ember.js 兼容

    我正在尝试使用 Loopback 来获取与 Ember 对话的 API Ember 要求 JSON 包含在 键 中 例如对于一个帐户 account domain domain com subdomain test title test d
  • Alpine 操作系统上的 Php7 Redis 客户端

    我使用 alpine 3 5 作为基础镜像制作了一个 docker 镜像 我希望我的 php 应用程序在容器内运行以与 redis 服务器通信 但我在 Alpine 中找不到任何 php7 redis 客户端 有解决办法吗 我尝试使用pec
  • 将图像分成3*3的块

    我有一个矩阵 它的维度恰好不是 3 的倍数 或者可能是 3 的倍数 我们怎样才能将整个图像分成3 3矩阵块 可以忽略最后不属于3 3倍数的 另外 3 3矩阵可以保存在数组中 a 3 b 3 window size x size f 1 a
  • 在文本框中输入文本

    谁能告诉我为什么会这样jsFiddle http jsfiddle net 4NwZ9 不起作用 这个想法很简单 只是假设将选定的文本输入到文本框中 HTML
  • 配置 Qt Creator 以与 GDB 一起使用

    我的机器上有 GDB 和 CDB 我的 Qt 创建者正在使用 CDB 进行调试 我试图指向GDB路径 但它不起作用 如何设置 Qt Creator 使用 GDB 进行调试 确保您已将 Qt Creator 设置为 调试 构建配置 构建菜单
  • 在鼠标悬停在画布上的形状/位置(坐标)上时显示工具提示

    当鼠标悬停在画布上的某些位置时 我试图显示相应的工具提示 例如 当鼠标在画布上的坐标为 100 100 时 显示tooltip1 当鼠标位置在 200 200 时 显示tooltip2等 我已经添加了事件侦听器来检测鼠标移动并获取鼠标位置
  • 使用 Java 验证 CSV 文件

    我正在逐行读取文件 如下所示 FileReader myFile new FileReader File file BufferedReader InputFile new BufferedReader myFile Read the fi
  • DDS - 推荐哪一种 - OpenSplice 还是 CoreDX? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我需要 C winform 应用程序和 android 本机应用程序来使用 DDS 数据分发服务 每个人都可以是订阅者和作者 对我来说重要的是
  • Socket.io 自定义客户端 ID

    我正在使用 socket io 制作一个聊天应用程序 并且我想使用我的自定义客户端 ID 而不是默认的客户端 ID 8411473621394412707 1120516437992682114 有没有什么方法可以在连接时发送自定义标识符
  • 如何使用 ObjectMapper 在没有默认构造函数的情况下反/序列化不可变对象?

    我想使用 com fasterxml jackson databind ObjectMapper 序列化和反序列化一个不可变对象 不可变类看起来像这样 只有 3 个内部属性 getter 和构造函数 public final class I
  • Reveal JS 无法在幻灯片中滚动

    我正在使用 Reveal JS 进行演示 如果我在标签中放置更多文本 它就会隐藏在屏幕下方 但右侧没有滚动条 想知道我是否可以修复 css 以引入垂直滚动条并通过滚动使隐藏内容可见 这是要更改的CSS 我认为 reveal slides s