3.0.3 • Published 6 years ago
overunder v3.0.3
overunder
Tiny waypoint library. 750 bytes gzipped.
Features
- Supports both x and y axis
- Accepts both integer values and DOM nodes
- Only one
scroll
and oneresize
listener
Usage
import overunder from 'overunder'
const scroller = overunder({
y: 1000
})
scroller.on('y over', () => {
console.log('user scrolled over 1000px')
})
scroller.update()
import overunder from 'overunder'
const scroller = overunder({
y: document.getElementById('lazyImg')
})
scroller.on('y over', () => {
console.log('#lazyImg is visible')
})
scroller.update()
import overunder from 'overunder'
const scroller = overunder({
x: 900
})
scroller.on('x under', () => {
console.log('viewport is < 900px wide')
})
scroller.update()
import overunder from 'overunder'
const scroller = overunder({
x: 900,
x2: 1200
})
scroller.on('x between', () => {
console.log('viewport is between 900px and 1200px wide')
})
scroller.update()
import overunder from 'overunder'
const scroller = overunder({
x: 900,
y: document.getElementById('hideNavTrigger')
})
scroller.on('x under', () => {
scroller.update({
y: document.getElementById('hideNavTrigger2')
})
})
scroller.on('x over', () => {
scroller.update({
y: document.getElementById('hideNavTrigger')
})
})
scroller.update()
Events
overunder
emits events depending on what waypoints you pass to it. They follow
the same pattern: <axis> <position>
. Given an x
and y
value, overunder
will emit the following events.
x over
x under
y over
y under
Pass a second value for each and overunder
will emit between
event:
x between
y between
Subscribing to events
const listener = scroll.on('y over', () => {})
listener() // destroy listener
API
update(options)
Checks position and fires applicable listeners.
scroller.update()
Pass an optional options object to update waypoint values.
scroller.update({
x: 1000
})
License
MIT License © Eric Bailey
3.0.3
6 years ago
3.0.2
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.3
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago
0.4.1
8 years ago
0.4.0
8 years ago
0.3.1
8 years ago
0.3.0
8 years ago
0.2.1
8 years ago
0.2.0
8 years ago
0.1.4
8 years ago
0.1.3
8 years ago
0.1.2
8 years ago
0.1.1
8 years ago
0.1.0
8 years ago
0.0.7
8 years ago
0.0.6
8 years ago
0.0.5
8 years ago
0.0.4
8 years ago
0.0.2
8 years ago
0.0.1
8 years ago