Scrollbar for output chunk in Quarto - r

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