如何在Quarto的revealjs演示文稿中实现水平滚动？

Quarto的RevealJS默认提供的.scrollable类仅支持垂直滚动，要实现水平滚动，你需要自定义CSS类来控制内容的溢出行为。

具体实现步骤： #

1. 定义水平滚动的CSS类
   在文档中添加CSS代码块，创建用于水平滚动的自定义类：

   .h-scrollable {
     overflow-x: auto;
     white-space: nowrap;
     max-width: 100%;
     padding-bottom: 1rem; /* 避免滚动条遮挡内容 */
   }
   
   /* 可选配置：让列表横向排列（针对列表类内容） */
   .h-scrollable ul {
     display: inline-flex;
     list-style: none;
     padding-left: 0;
     gap: 2rem;
   }
   

2. 在目标幻灯片应用该类
   将.h-scrollable类添加到需要水平滚动的幻灯片标题后即可生效：

   ---
   title: "水平滚动演示"
   format: revealjs
   ---
   
   ## 横向滚动列表 {.h-scrollable}
   
   - 项目1
   - 项目2
   - 项目3
   - 项目4
   - 项目5
   - 项目6
   - 项目7
   - 项目8
   - 项目9
   - 项目10
   

不同内容场景的调整方式： #

• 长文本段落：直接给幻灯片添加.h-scrollable类即可，文本会自动保持不换行，超出幻灯片宽度时触发水平滚动。
• 自定义内容宽度：可以修改.h-scrollable的width属性（比如设置为120%），让内容主动超出幻灯片默认宽度，强制触发滚动效果。

内容的提问来源于stack exchange，提问作者Quinten