dom-autoscroller
Advanced tools
Version 2 of dom-autoscroller is out. You can upgrade to version 2.
Here are the differences.
Scrolling in dom-autoscroller is now much smoother. So you should upgrade to version 2.
npm 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.
This example uses link-css, and dragula.
require('link-css')('../node_modules/dragula/dist/dragula.min.css');
var dragula = require('dragula'),
autoScroll = require('dom-autoscroller');
var drake = dragula([document.querySelector('#list'), document.querySelector('#hlist')]);
var scroll = autoScroll([
document.querySelector('#list-container'),
document.querySelector('#container2')
],{
margin: 20,
maxSpeed: 5,
scrollWhenOutside: true,
autoScroll: function(){
//Only scroll when the pointer is down, and there is a child being dragged.
return this.down && drake.dragging;
}
});
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 dom-autoscroller.
For clarity here is a more complete example:
<!DOCTYPE html>
<html>
<head>
<title>Drag test</title>
<style>
#list-container{
/*The height produces the scroll bar.*/
height: 100px;
/*Make this scrollable.*/
overflow-y: auto;
}
</style>
</head>
<body>
<div id="list-container">
<ol id="list" type="1">
<li>zero</li>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
</ol>
</div>
<div id="container2">
<ol id="hlist">
<li>zero</li>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ol>
</div>
<script>
//Load dragula's css.
require('link-css')('../node_modules/dragula/dist/dragula.min.css');
var dragula = require('dragula'),
papyri = require('dom-autoscroller');
var drake = dragula([document.querySelector('#list'), document.querySelector('#hlist')]);
var scroll = autoScroll([
document.querySelector('#list-container'),
document.querySelector('#container2')
],{
margin: 20,
pixels: 5,
scrollWhenOutside: false,
autoScroll: function(){
return this.down && drake.dragging;
}
});
</script>
</body>
</html>
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.
jsfiddle Demo of dom-autoscroller
Create an auto scroller on an element, or and array of elements.
The element should have only one child element to work consistently.
An inner area to detect when the pointer is close to the edge.
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.
maxSpeed defaults to 4.
Speed effects in dom-autoscroller:
maxSpeed limits pixels per frame.
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.
Whther or not it should continue to scroll when the pointer is outside the container. Defaults to false.
Is the pointer down?
A reference to the pointer object.
The function you set in the constructor options for options.autoScroll.
Remove all event listeners needed to be able track the pointer.
There are undocumented methods in version 2.
These are:
These methods add, or remove elements from dom-autoscroller.
Why are these considered undocumented even though there here in the document? :)
add, and 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.
FAQs
Auto scroll dom elements
The npm package dom-autoscroller receives a total of 45,322 weekly downloads. As such, dom-autoscroller popularity was classified as popular.
We found that dom-autoscroller demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.