npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dom-autoscroller

v2.3.4

Published

Auto scroll dom elements

Downloads

215,947

Readme

dom-autoscroller

dom autoscroller

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 dom-autoscroller.

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 syncMove, and mousemove dispatch into dom-autoscroller.

Once movement sync is fully integrated into dom-autoscroller the syncMove option might be set to default true, or removed entirely. It depends on how things work out down the line.

Big Announcement!

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.

Install

NPM

npm install --save dom-autoscroller

BOWER

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:

  • dist/dom-autoscroller.js
  • dist/dom-autoscroller.min.js

If you use one of these prepackaged files the global name is autoScroll.

Demo

jsfiddle Demo of dom-autoscroller

Usage

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;
    }
});

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 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.

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:

  1. Speed adjusts dynamically depending on how close to the edge your pointer is.
  2. 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

autoScroll

The function you set in the constructor options for options.autoScroll.

destroy(forceCleanAnimation)

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() and .destroy(false) is the same behaviours.

Undocumented methods

There are undocumented methods in version 2.

These are:

  1. add()
  2. remove()

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.

About

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.