Container

string | node

options.container is used as the viewport, when determining element visibility. This is the element that ScrollReveal binds event listeners to.

The reveal effect occurs when elements enter their viewport. Your custom containers must have their own scrollbars, or their children will always be "visible" and reveal immediately on page load.

Default Value

{ container: document.documentElement }

Accepted Values

Usage

Let’s say our layout uses the window scrollbar for primary content, and has fixed sidebar that scrolls separately. Because we want sidebar children to reveal relative to their parent (not the window), we specify a different container, e.g:

ScrollReveal().reveal('.items');
ScrollReveal().reveal('#sidebar .items', { container: '#sidebar' });