Scrollbar for output chunk in Quarto

Question

I would like to plot multiple plots from a chunk and add a scrollbar to the output of that chunk. I see here that this could be done for Code Overflow, but I am not sure how to scroll the output instead of adding all the plots below each other like in the example below:

---
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:

As we can see from the output, all the plots are shown below each other, but I would like to have a scrollbar chunk so it doesn't show all plot at once. So I was wondering if anyone knows how to add a scroll option to the output of a chunk in Quarto?

Answer 1

You can create a css file with a defined max-height and overflow-y and add it to your chunk with class. Note that this will also include the code in the scrolling section. Also note that if you want a text output to be scrollable, you should use class-output instead of class in your chunk options.

---
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

You can add a div before the chunk, e.g.

---
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;
}

If you do not want the scrolling for the code, than you could do this:

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

:::