https://github.com/jonataswalker/scroll-watcher

:zap: :scroll: A lightweight, blazing fast, rAF based, scroll watcher.
https://github.com/jonataswalker/scroll-watcher

scrolling scrolling-watchers watch

Last synced: about 1 month ago
JSON representation

:zap: :scroll: A lightweight, blazing fast, rAF based, scroll watcher.

• Host: GitHub
• URL: https://github.com/jonataswalker/scroll-watcher
• Owner: jonataswalker
• License: mit
• Created: 2016-09-15T18:42:46.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-02-04T03:22:12.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T12:32:31.678Z (2 months ago)
• Topics: scrolling, scrolling-watchers, watch
• Language: JavaScript
• Homepage:
• Size: 2.14 MB
• Stars: 56
• Watchers: 4
• Forks: 7
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-blazingly-fast - scroll-watcher - :zap: :scroll: A lightweight, blazing fast, rAF based, scroll watcher. (JavaScript)

README

        
# scroll-watcher



  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



A lightweight, blazing fast, [rAF](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) based, scroll watcher.

A more up-to-date approach to this **_scrolling watchers_** stuff. Slightly inspired by [scrollMonitor](https://github.com/stutrek/scrollMonitor).

### Demos

→ [Scrolling, Moving and Recalculating](https://jonataswalker.github.io/scroll-watcher/examples/example.html)

→ [Static Website Menu](https://jonataswalker.github.io/scroll-watcher/examples/example2.html)

## How to use it?

##### → CDN Hosted - [jsDelivr](http://www.jsdelivr.com/projects/scroll-watcher)

```HTML

```

##### → Self hosted

Download [latest release](https://github.com/jonataswalker/scroll-watcher/releases/latest).

##### → [NPM](https://www.npmjs.com/package/scroll-watcher)

```shell

npm install scroll-watcher

```

##### Instantiate and watch for a specific (or a list) DOM element

```javascript

var scroll = new ScrollWatcher();

scroll

  .watch("my-element")

  .on("enter", function(evt) {

    console.log("I'm partially inside viewport");

  })

  .on("enter:full", function(evt) {

    console.log("I'm entirely within the viewport");

  })

  .on("exit:partial", function(evt) {

    console.log("I'm partially out of viewport");

  })

  .on("exit", function(evt) {

    console.log("I'm out of viewport");

  });

```

##### Make some decision when page is loaded (or reloaded)

```javascript

watcher.on("page:load", function(evt) {

  // maybe trigger a scroll?

  window.setTimeout(() => window.scrollBy(0, 1), 20);

});

```

## Instance Methods

### watch(target[, offset])

- `target` - `{String|Element}` String or DOM node.

- `offset` - `{Number|Object|undefined}` (optional) Element offset.

###### Returns:

- Methods

  - `on/once/off` - common events

  - `update` - updates the location of the element in relation to the document

- Properties

  - `target` - DOM node being watched

#### windowAtBottom([offset])

- `offset` - `{Number|undefined}` (optional) How far to offset.

#### windowAtTop([offset])

- `offset` - `{Number|undefined}` (optional) How far to offset.

## Instance Events - `on/once/off`

You can simply watch for scrolling action:

```javascript

var watcher = new ScrollWatcher();

watcher.on("scrolling", function(evt) {

  console.log(evt);

});

// or just once

watcher.once("scrolling", function(evt) {

  console.log(evt);

});

// and turn it off (later)

watcher.off("scrolling");

```

## License

[MIT](https://github.com/jonataswalker/scroll-watcher/blob/master/LICENSE.md)