Keeps a DOM element scrolled down, based on user intention.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.jshintignore
.jshintrc
LICENSE
README.md
index.js
package.json
spinner.gif
test.html
test.js

README.md

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

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.

License

The MIT License (MIT)

Copyright (c) 2014-2016 Nathanael C. Fritz