Author: Yihui Xie
Date: 2025-04-03

# Scrollama Document with the Basic Style

#### Yihui Xie

#### 2025-04-03

# 1 Setting up

A Scrollama document consists of “step elements”. As you scroll down/up the document, a step element may enter or exit an offset threshold, which you can imagine as a horizontal line placed at a certain height of the viewport.

For this document, the step elements are level-one sections. Every time a level-one section enters the offset threshold, a class `is-active` is added to it. When it exits the threshold, the class is removed. To better understand the offset threshold, you can turn on the `debug` option in `rolldown::scrollama_setup()` so you can see the horizontal line:

    rolldown::scrollama_setup(
      list(step = '.level1', offset = .2, debug = TRUE)
    )

Note that `rolldown::scrollama_setup()` should be actually called at the end of a document.

Below is the CSS applied to this document. Basically we added borders to level-one sections, and background colors to “active” sections.

    .level1 {
      min-height: 400px;
      border: 1px solid;
      margin-bottom: 4em;
      padding: 1em 2em 2em;
    }
    .is-active {
      background-color: yellow;
    }
    body {
      margin-bottom: 80vh;
    }

## 1.1 Level-two heading

Level-two and below headings…

### 1.1.1 Level-three

…are all contained in the same section.

# 2 Text

Example text.

# 3 Plots

You may include any number of plots in a section.

    par(mar = c(4, 4, .5, .1))
    plot(pressure, type = 'h', las = 1)

# 4 For experts

As mentioned in the beginning, you should call `rolldown::scrollama_setup()` at the end of a document. If you know JavaScript, you may have noticed that `scrollama_setup()` is a simple helper function to write out JavaScript like this:

    (function() {
      var scroller = scrollama();
      scroller.setup({"step": ".level1", "offset": 0.2})
        .onStepEnter(res => {
          res.element.classList.add("is-active");
        })
        .onStepExit(res => {
          res.element.classList.remove("is-active");
        });
      window.addEventListener("resize", scroller.resize);
    })();

You certainly do not have to rely on this R helper function, and can write JavaScript directly in an R Markdown document. For example, if you want to use the class name `current` instead of `is-active`, you may set up Scrollama with a `js` code chunk:

    ```{js, echo=FALSE}
    (function() {
      var scroller = scrollama();
      scroller.setup({"step": ".level1", "offset": 0.2})
        .onStepEnter(res => {
          res.element.classList.add("current");
        })
        .onStepExit(res => {
          res.element.classList.remove("current");
        });
      window.addEventListener("resize", scroller.resize);
    })();
    ```

For more information about Scrollama, please check out its documentation at https://github.com/russellsamora/scrollama.