The below example shows two slides.
A scrollable container that takes up the entire slide, with a scrollable image. This works.
I want the full picture on the left side and on the right side the scrollable version. But this does not work.
How to make a slide of two columns one static and other scrollable?
---
format: revealjs
---
## slide 1
This works!
::: {.scroll-container style="overflow-y: scroll; height: 500px;"}
{fig-align="center" width="100%"}
:::
## slide 2
This does not work!
::: {layout-ncol=2}
{fig-align="center" width="50%"}
::: {.scroll-container style="overflow-y: scroll; height: 500px;"}
{fig-align="center" width="100%"}
:::
:::
This happens because the custom CSS gets overwritten by Quarto's layout defaults. You can keep it if you define a separate div within a .column, where the div has the needed properties:
---
format: revealjs
---
## slide 1
This works!
::: {.scroll-container style="overflow-y: scroll; height: 500px;"}
{fig-align="center" width="100%"}
:::
## slide 2
This also works!
::::: {layout-ncol=2}
{fig-align="center" width="50%"}
:::: {.column}
::: {.scroll-container style="overflow-y: scroll; height: 500px; position: sticky;"}
{fig-align="center" width="100%"}
:::
::::
:::::