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

:::