Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fire events when scrolling over dom elements
JavaScript CSS
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples/menu
test
.gitignore
History.md
Makefile
Readme.md
component.json
index.js

Readme.md

scroll-position

Fire events when scrolling over dom elements.

Installation

$ component install timoxley/scroll-position

Example

// Elements we want to track
var items = document.querySelectorAll('div')

var ScrollPosition = require('scroll-position')
var itemPosition = ScrollPosition(items, {
  // Default settings
  offsetOut: 100, // y position in px where items leave the viewport
  offsetIn: 0 // y position where items enter the viewport
})

itemPosition.on('out', function(el) {
  // el was scrolled out of the top of the viewport
  console.log(el)
})
itemPosition.on('in', function(el) {
  // el was scrolled in from the top of the viewport
  console.log(el)
})
itemPosition.on('inOut', function(el) {
  // el was scrolled in or out of the top of the viewport
  console.log(el)
})

Demo

Events

out

Fired whenever one of the supplied items is scrolled out the top of the viewport e.g scrolling down, and the item goes out the top of the viewport.

The first argument to the callback is the element which scrolled out.

in

Fired whenever one of the supplied items is scrolled into the top of the viewport e.g scrolling up, and the item enters the top of the viewport.

The first argument to the callback is the element whom scrolled in.

inOut

Fired whenever one of the target items scrolls in OR out of the top of the viewport. e.g scrolling up or down, and the item enters or leaves the top of the window.

The first argument to the callback is the element which scrolled in or out.

License

MIT

Something went wrong with that request. Please try again.