如何为Quarto代码块输出添加scrollbar？

方法1：针对单个代码块配置（推荐） #

先在文档中添加自定义CSS样式，定义滚动区域的显示规则：

.scroll-output {
  max-height: 400px; /* 根据需求调整最大高度 */
  overflow-y: auto; /* 开启垂直滚动 */
  border: 1px solid #e5e5e5; /* 可选：添加边框区分输出区域 */
  padding: 8px; /* 可选：增加内边距优化显示 */
}

然后在生成多幅ggplot图表的代码块中，指定output-class为我们定义的类：

#| output-class: scroll-output
#| echo: true

library(ggplot2)

# 批量生成示例图表
for (i in 1:5) {
  ggplot(mtcars, aes(x = wt, y = mpg)) +
    geom_point(color = "steelblue") +
    ggtitle(paste("示例图表", i)) +
    theme_minimal() |> print()
}

运行后，代码块的输出区域会被限制在设定高度内，超出部分自动出现垂直滚动条，避免所有图表堆叠显示。

方法2：全局配置所有代码块输出 #

如果希望所有代码块的输出都默认带滚动效果，可以在文档的CSS块中设置全局样式：

.cell-output {
  max-height: 500px;
  overflow-y: auto;
}

该设置会作用于文档中所有代码块的输出区域，适合需要统一效果的场景。

关键原理 #

Quarto会将代码块的输出内容包裹在带有cell-output类的HTML元素中，通过自定义CSS设置max-height（限制区域高度）和overflow-y: auto（超出时显示滚动条），就能实现滚动效果。自定义output-class则可以针对单个代码块单独配置，不影响其他内容。

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