Quarto中输出块的滚动条

Question

我想从一个代码块中绘制多个图表，并在该块的输出中添加一个滚动条。我在这里看到，Code Overflow可以实现这一点，但我不知道如何滚动输出，而不是像下面的示例那样将所有图表添加在下面：

---
title: "Scrollbar in output chunk"
format:
  html:
    code-overflow: wrap
---

Here is some example code:

```{r}
#| code-overflow: wrap
library(ggplot2)
for(i in unique(iris$Species)) {
  print(
    ggplot(iris[iris$Species == i, ], aes(x = Sepal.Length, Sepal.Width)) +
      geom_point()
  )
}
```

输出：

从输出中可以看出，所有的绘图都显示在下面，但我希望有一个滚动条块，这样它不会一次性显示所有的绘图。所以我想知道是否有人知道如何在Quarto中为代码块输出添加滚动选项？

- Quinten

Answer 1

你可以创建一个带有定义好的 max-height 和 overflow-y 的 CSS 文件，并将其添加到带有 class 的块中。请注意，这也将包括滚动部分的代码。此外，请注意，如果您想让文本输出可滚动，应该在块选项中使用 class-output 而不是 class。

---
title: "scrollable-output"
format: html
---

```{css, echo = FALSE}
.output {
max-height: 500px;
overflow-y: scroll;
}
```

Here is some example code

```{r}
#| class: output
library(ggplot2)
for(i in unique(iris$Species)) {
  print(
    ggplot(iris[iris$Species == i, ], aes(x = Sepal.Length, Sepal.Width)) +
      geom_point()
  )
}
```

- Maël

Answer 2

您可以在块前添加一个div，例如：

您可以在块前添加一个div，例如：

---
title: "Scrollbar in output chunk"
format: html
    
css: styles.css
---

Here is some example code:

:::{.scrolling}

```{r}

library(ggplot2)
for(i in unique(iris$Species)) {
  print(
    ggplot(iris[iris$Species == i, ], aes(x = Sepal.Length, Sepal.Width)) +
      geom_point()
  )
}
```

:::

styles.css

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

如果您不想让代码滚动，可以这样做：

---
title: "Scrollbar in output chunk"
format: html
    
css: styles.css
---

Here is some example code:

```{r}
#| eval: false

library(ggplot2)
for(i in unique(iris$Species)) {
  print(
    ggplot(iris[iris$Species == i, ], aes(x = Sepal.Length, Sepal.Width)) +
      geom_point()
  )
}
```

:::{.scrolling}

```{r}
#| echo: false

library(ggplot2)
for(i in unique(iris$Species)) {
  print(
    ggplot(iris[iris$Species == i, ], aes(x = Sepal.Length, Sepal.Width)) +
      geom_point()
  )
}
```

:::

- Julian