The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

Scrollama Document with the Basic Style

Yihui Xie

2019-07-09

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, 0.5, 0.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/russellgoldenberg/scrollama.

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.