https://github.com/derhowie/scrollsync

A reagent component for managing scroll events powered by core.async.
https://github.com/derhowie/scrollsync

Last synced: about 1 year ago
JSON representation

A reagent component for managing scroll events powered by core.async.

• Host: GitHub
• URL: https://github.com/derhowie/scrollsync
• Owner: derHowie
• Created: 2017-01-27T20:16:02.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-10T00:41:12.000Z (about 9 years ago)
• Last Synced: 2025-04-02T20:44:37.995Z (about 1 year ago)
• Language: Clojure
• Size: 13.7 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# scrollsync

A reagent component for managing scroll events powered by core.async.

## Usage

[![Clojars Project](https://img.shields.io/clojars/v/scrollsync.svg)](https://clojars.org/scrollsync)

Scrollsync fires events based on the positioning of a collection of elements with respect to the browser window.

```clojure

(:require [reagent.core :as r]

          [scrollsync.core :refer [scrollsync])

(defn some-content

  []

  [:div

    [:div {:id "one"}

     [:p "lorem"]]

    [:div {:id "two"}

     [:p "ipsum"]]

    [:div {:id "three"}

     [:p "dolor"]]])

(defn my-scrollsync-view

  []

  [scrollsync :bp-fn       #(.log js/console %)

              :content     some-content

              :breakpoints [{:id "one"

                             :params "lorem!!!"

                             :break-at 100}

                            {:id "two"

                             :params "ipsum!!!"

                             :break-at 150}

                            {:id "three"

                             :params "dolor!!!"

                             :break-at 75}]]

```

## Parameters

### :bp-fn

`fn`

The function fired when a breakpoint is reached.

### :breakpoints

`[{:id "some-id" :params {:a "b"} :break-at 100}...]`

A collection of maps describing each element with a scroll event.

#### :id

the element's id

#### :params

the data passed to `bp-fn` when the breakpoint is reached

#### :break-at

the offset at which the element's breakpoint is triggered (an offset of 0 would fire an event when the top of the element reaches the top of the viewport)

### :content

`component`

scrollsync's child element

Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version.