Scrollbar for output chunk in Quarto-CodePudding

I would like to plot multiple plots from a chunk and add a scrollbar to the output of that chunk. I see

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?

CodePudding user response：

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

CodePudding user response：

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

:::