Scroll a long image not the whole slide in revealjs

[zhengchencai]

Description

Hello,

I wonder if it is possible to scroll a long image vertically or a wide image horizontally in one slide? Adding {.scrollable} after the slide heading works but will scroll the whole slide not only the image. I tried the following it doesn't work, maybe {.scrollable} can only be used for the whole slide?

::: {.scrollable}
![](path of the image)
:::

Also tried to create a new container as follows and it doesn't work either, maybe my syntax is wrong. Could you please help? Thank you very much.

.scroll-container {
  overflow-y: scroll;
  height: 400px; 
}

then in a slide

::: {.scroll-container}
![](path of the image)
:::

[mcanouil]

Possible, yes, but definitely not by default.
You need to ensure your image is not resized (see https://quarto.org/docs/presentations/revealjs/advanced.html#stretch) and set high value for width/height.
Note that you can't use 100% (or any relative size) because it means within the slide.

---

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[zhengchencai]

Thank you very much @mcanouil. The following example seems to work,

---
format: 
  revealjs: 
    embed-resources: true # this controls whether resources in an external folder 
    standalone: true # this is default option to have a complete HTML file 
    transition: none
    progress: true
    controls: false
    width: 1280
    height: 720
    menu: false
    preview-links: false
    multiplex: false
    auto-stretch: false
---

## Scrollable slide {.scrollable}

A full workflow available in TE-dependent analysis [tedana](https://tedana.readthedocs.io/en/stable/multi-echo.html) Python library

![](https://tedana.readthedocs.io/en/stable/_images/decision_tree_kundu.png){fig-align="center" width="650"}

## Attempt for scrollable long image

A full workflow available in TE-dependent analysis [tedana](https://tedana.readthedocs.io/en/stable/multi-echo.html) Python library

<div style="overflow-y: scroll; height: 400px;" class="scroll-container">
  ![](https://tedana.readthedocs.io/en/stable/_images/decision_tree_kundu.png){fig-align="center" width="650"}
</div>

but do you know how can I create a container in CSS file such that I could use it like :::{.scroll-img} rather than HTML code? When I tried the following it doesn't work.

.scroll-container {
  overflow-y: scroll;
  height: 400px; 
}

[mcanouil]

Why did you use HTML now while you were using fenced divs?
Also, there is no need to set both style and class attributes, especially when the class has the exact same specification.

See:

• https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans

[zhengchencai]

Thanks a lot. After reading the ref you gave, the following fences divs also works.

::: {.scroll-container style="overflow-y: scroll; height: 400px;"}
![](https://tedana.readthedocs.io/en/stable/_images/decision_tree_kundu.png){fig-align="center" width="350"}
:::