The syncMove option and synchronizing move
dom-autoscroller has a new option named syncMove.
syncMove takes a boolean, or a function that returns a boolean, and the returned value of
syncMove toggles the event synching of
Why do that? There are some situations where
dom-autoscroller might be doing what it does, but even though the mouse cursor moves relative to the scroll position
mousemove events do not get fired. When you set
syncMove to true that allows
mousemove events with fresh coordinates to be fired for some other source that might need those events.
For now the option
syncMove is set to false. This is for experimental purposes, and because this functionality is likely to be buggy.
touchmove syncing is also planned, but it's best if the integration of move syncing be taken slow. Please leave plenty of issues to help integrate
mousemove dispatch into
Once movement sync is fully integrated into
syncMove option might be set to default true, or removed entirely. It depends on how things work out down the line.
Version 2 of dom-autoscroller is out. You can upgrade to version 2.
Here are the differences.
- pixels option removed.
- maxSpeed option added.
- Slightly different algorithm for scrolling
- Scrolling speed changes dynamically based on distance from element edge
- Compatibility with rollup.
Scrolling in dom-autoscroller is now much smoother. So you should upgrade to version 2.
npm install --save dom-autoscroller
bower install --save dom-autoscroller
Then use browserify, webpack, or rollup to build your script.
Or Download one of these files from the Github repo:
If you use one of these prepackaged files the global name is autoScroll.
'../node_modules/dragula/dist/dragula.min.css';var dragula =autoScroll = ;var drake = ;var scroll =;
Keep In Mind
dom-autoscroller exploits the simplicity of the single parent, to child relationship. A scrolling element with more than one children will likely not work well with
For clarity here is a more complete example:
If you look at the last example notice the containers have only one child, and that they're different from the containers used by dragula. In theory multiple children could work with
dom-autoscroller, but the children scrolling might interfere with the workings of the library dragula.
Auto Scroller API
autoScroll(element|elements, options) -> instance
Create an auto scroller on an element, or and array of elements.
The element should have only one child element to work consistently.
options.margin = Integer
An inner area to detect when the pointer is close to the edge.
options.autoScroll = Function
A callback function used to determine if the element should scroll, or when the element should scroll.
Return a boolean value from this function to allow scrolling.
options.maxSpeed = Integer
maxSpeed defaults to 4.
Speed effects in dom-autoscroller:
- Speed adjusts dynamically depending on how close to the edge your pointer is.
- Speed is pixels per frame.
maxSpeed limits pixels per frame.
options.pixels = Integer
removed in version 2
Set how many pixels per second you want to scroll during the auto scrolling action. More is smoother.
Speed was pixels/second in version 1, and in version 2 speed is pixels/frame.
options.scrollWhenOutside = Boolean
Whther or not it should continue to scroll when the pointer is outside the container. Defaults to false.
Auto Scroller Properties
down = Boolean
Is the pointer down?
scrolling = Boolean
Is one of the elements scrolling?
point = Object
This reference no longer exists.
A reference to the pointer object.
Auto Scroller Methods
The function you set in the constructor options for
Remove all event listeners needed to be able to track the pointer. If destroy Auto Scroller meanwhile scrolling then just call
.destroy(true) to force to stop scrolling animation. Call
.destroy(false) is the same behaviours.
There are undocumented methods in version 2.
These methods add, or remove elements from dom-autoscroller.
Why are these considered undocumented even though there here in the document? :)
remove are incomplete, and there is no detailed explanation. Use these methods at your own risk.
There are tons of reasons to have auto scrolling. The main one being sometimes a finger can't reach the mouse wheel comfortably.
dom-autoscroller is a comfort module.
This is also a nice small module to do this kind of thing when auto scrolling is all you need.