Skip to content

timoxley/scroll-position

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Fire events when scrolling over dom elements

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •