onresize
Listen on the change of HTML Element.
Usage
By default, listen on the size change of element.
const onresize = require('@lakca/onresize')
onresize(document.body, size => {
console.log(size.width) // offsetWidth
console.log(size.height) // offsetHeight
})
Change default triggering frame(30) interval.
onresize(document.body, { frame: 60 }, ...)
Custom
getSize
andequal
to listen on changes of other properties.
onresize(document.body, {
getSize(el) {
const pos = el.getBoundingClientRect()
return {
x: el.top,
y: el.left
}
},
equal(a, b) {
return a.x === b.x && a.y === b.y
}
}, ...)
API
onresize(HTMLElement, [options], callback)
options.frame [number: 30]
it uses
window.requestAnimationFrame
to conduct periodic detection of element changes.
The comparing operands are data retrieved in every adjacent triggering frame.
options.getSize [function=defaultGetSize]
function defaultGetSize(ele) {
return {
width: ele.offsetWidth,
height: ele.offsetHeight
}
}
By default, the program listens on element layout size changing, you can provide
options.getSize
andoptions.equal
to change retrieved data and comparing method, such as position of element.
options.equal [function=defaultEqual]
function defaultEqual(one, other) {
return one.width === other.width && one.height === other.height
}
Also, you can listen on any change that is related to screen refreshing.
LICENSE
MIT