Light

jonataswalker / scroll-watcher Goto Github PK

View Code? Open in Web Editor NEW

54.0 4.0 7.0 2.19 MB

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

License: MIT License

JavaScript 89.60% CSS 3.10% HTML 7.29%

scrolling watch scrolling-watchers

scroll-watcher's Introduction

scroll-watcher

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

A more up-to-date approach to this scrolling watchers stuff. Slightly inspired by scrollMonitor.

Demos

→ Scrolling, Moving and Recalculating

→ Static Website Menu

How to use it?

→ CDN Hosted - jsDelivr

<script src="https://cdn.jsdelivr.net/npm/scroll-watcher@latest/dist/scroll-watcher.min.js"></script>

→ Self hosted

Download latest release.

→ NPM

npm install scroll-watcher

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

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)

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:

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

scroll-watcher's People

Contributors

Stargazers

Watchers

Forkers

kthilagarajan lukasdrgon lukmannulhakim touchx libin1991

scroll-watcher's Issues

TypeScript definitions

type ScrollWatcherEventName
    = "page:load"
    | "scrolling"
    | "enter"
    | "enter:full"
    | "exit:partial"
    | "exit"

interface ScrollWatcherEvent {
    scrollX: number
    scrollY: number
    scrollingDown: boolean
    scrollingUp: boolean
    target: HTMLElement
}

interface ScrollWatcherEventCallback {
    (event: ScrollWatcherEvent): void
}

declare module "scroll-watcher" {
    interface EventEmitter {
        once(eventName: ScrollWatcherEventName, callback: ScrollWatcherEventCallback): EventEmitter
        on(eventName: ScrollWatcherEventName, callback: ScrollWatcherEventCallback): EventEmitter
        off(eventName: ScrollWatcherEventName, callback: ScrollWatcherEventCallback): EventEmitter
    }

    class ScrollWatcher {
        watch(element: HTMLElement): EventEmitter
    }

    namespace ScrollWatcher { }

    export = ScrollWatcher
}

Demos don't work

It seems library is not defined.

Update demo to use file from CDN

Hi,

At this moment https://jonataswalker.github.io/scroll-watcher/dist/scroll-watcher.js are in 404

Onload event listener

I use this package to play a video when the element is the viewport.

The only problem I have encountered is that when I reload the page and I have the video in my viewport it won't play until I trigger the scroll event.

It would be great having a onload/onload:full event listener that executes when an element has been added to the DOM, check if it's in the viewport and triggers the callback.

Trigger "in view" when page load and element is already in viewport (ie: no need for scrolling)

Hi,

I'm using this script to automatically play videos when they fully come visible in viewport. However, there are few videos which area already fully visible when the page load => how to trigger the script for them ?

Thank you

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.