Quarto 中 output 塊的滾動條

Question

我想從一個塊中繪制 plot 多個圖，並向該塊的 output 添加一個scrollbar 。 我在這里看到這可以針對代碼溢出來完成，但我不確定如何滾動 output 而不是像下面的示例那樣將所有圖表添加到彼此下面：

---
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()
  )
}
```

Output：

正如我們從 output 中看到的那樣，所有的圖都顯示在彼此下方，但我想要一個滾動條塊，這樣它就不會一次顯示所有 plot。 所以我想知道是否有人知道如何向Quarto中的塊的 output 添加滾動選項？

Answer 1

您可以創建一個 css 文件，其中定義了max-height和overflow-y並使用class將其添加到您的塊中。 請注意，這還將包括滾動部分中的代碼。 另請注意，如果您希望文本output 可滾動，則應在塊選項中使用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()
  )
}
```

Answer 2

您可以在塊之前添加一個 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()
  )
}
```

:::