Nincompoops Producing Methane
    Wondering what’s next for npm?Check out our public roadmap! »

    staydown

    2.0.1 • Public • Published

    StayDown

    Logs and chats often have the style of appending new lines to the bottom, and keeping scrolling pinned to the bottom, unless a user indicates intention not to keep it pinned to the bottom by scrolling up from the bottom. Images add a complication, as they are added to the dom, but later change the size of the overflow. StayDown looks at all added element trees for images, and checks the scrolling again when the image has finished loading.

    StayDown keeps track of user intention for pinning the element scroll to the bottom, as elements are added, and checks at an interval. When a user scrolls up, StayDown stops scrolling down for the user, but re-initializes when the user scrolls back down to the bottom.

    Optionally, images can be replaced with a "spinner" loading image to make image loading a better user experience. Otherwise, loading images can resize and not scroll down until they are finished loading.

    Install

    NPM

    Module

    You can require this as a CommonJS module.

    const StayDown = require('staydown');

    Or you can import this as a ES6/ECMAScript 2016 module.

    import StayDown from 'staydown';

    Example

    const staydown = new StayDown({
        target: scrolling_element,
        interval: 1000,
        max: 50,
        spinner: "https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif",
        stickyHeight: 10,
        callback: function (event, msg) {
          console.log("got event:", event);
          console.log("event msg:", msg);
        }
    });
    staydown.append(new_element);

    Options

    Option Required Default Description
    target None Target Element
    interval 1000 Milliseconds to check if MutationObserver is unsupported
    spinner None URL to spinner image (gif)
    max 0 If not 0, remove oldest elements greater than max old
    stickyHeight 10 Number of pixels to consider bottom from bottom
    callback None function (eventType, msg)

    Events:

    The event callback is called with an event type whenever ScrollDown does something.

    • lock: lock to the bottom (at the beginning and when user scrolls back down)
    • release: release from the bottom (usually due to user scroll up)
    • scrolldown: whenever the view is scrolled down by StayDown
    • append: when an element is appended
    • checkfailed: when the interval check happens, it isn't scrolled down, and it is locked
    • removechild: when max items have been exceeded, and topmost child is removed
    • imageload: when an image loads in the overflow element, scrolling is checked
    • windowresize: when the window is resized, scrolling is checked

    Occasional Check

    When the browser doesn't have Mutation Observer support, a check interval is used for the case of images or dom mutations happening without using the this StayDown's append function.

    Building

    git clone git@github.com:fritzy/staydown.git
    cd staydown
    npm install
    npm run build

    License

    The MIT License (MIT)

    Copyright (c) 2014-2019 Nathanael C. Fritz

    Keywords

    none

    Install

    npm i staydown

    DownloadsWeekly Downloads

    508

    Version

    2.0.1

    License

    none

    Unpacked Size

    19.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar