1.0.5 • Published 5 years ago
compute-anchor v1.0.5
Compute Anchor
This is a small package, listening scroll
or wheel
or touchmove
event of the given DOM element, for compute the most compatible anchor in AnchorList.
And its
Getting Started
Prerequisites
This package support both pc and mobile.
Installing
$ npm install compute-anchor
Usage
let dispose = computeAnchor({// add event listener on element
element: document.getElementById('container'),
anchors: ['title', 'getting start', 'installing', 'usage'],
callback: anchor => console.log(anchor),
offset: {
top: 80,
bottom: 0
}
})
dispose()// remove event listener on element
API
computeAnchor
This function accept an element and some other options, to start listening element's event for compute anchor
Parameters
options
{Object}options.element
{DOMNode} which dom element contains all anchors and its scrollable (optional, defaultwindow
)options.useCapture
{Boolean} event listener useCapture (optional, defaultfalse
)options.events
{String[]} which events will add onoptions.elements
(optional, default['scroll','resize']
)options.anchors
{String[]} all anchors you care about, and it just anchor name, don't start with#
options.callback
{Function} callback will invoke when compute handler returns a new anchor if compute handler returns the same result, callback will not be invokedcallback(anchor){}
options.defaultAnchor
{String} if can't find any fit anchor, callback will receive defaultAnchor (optional, default''
)options.offset
{Number[]} offset0 is top offset, offset1 is bottom offset when your input element has some fixed top or fixed bottom children, options.offset if useful (optional, default[0,0]
)options.wait
{Number} wait is time in MS for eventListener wait time (optional, default20
)
Returns any computeObj {Function}- computeObj.compute {Function} - compute handler, you can invoke this funcion and get the compute result
- computeObj.dispose {Function} - the function to remove all eventListener on element
Running the tests
TODO
Contributing
There's no other contributor
Authors
teeeemoji teeeemoji@163.com
License
This project is licensed under the MIT License - see the LICENSE file for details
Task
important
- write test
- publish this package
others
- friendly way to write demo