Introducing: Nested Scroll

Published by cybso on 2017-07-31

Nested Scroll is a Javascript library that allows you to scroll
selected elements into the viewport. You can define if the element should be aligned to the upper, lower, left or right
boundary, or let Nested Scroll automatically decide depending on the shortest path.

Additionally, it is possible to define some animation methods, respect the element's border and margin
and add extra margins on each side when scrolling.

But what makes this library unique compared to other libraries I've looked into is that it that it
not only works with vertical but also with horizontal scrollbars, with nested scrollable DIVs
and with fixed elements!

Usage

  // Scroll with default options
  var target = document.getElementById('target-element');
  nestedScroll(target);

  // Scroll with additional parameters
  var options = {
    // See section options
    animationMethod: 'easeInOut',
    animationTimeout: 500,
    force: true,
    align: 'auto',
    withCssMargins: true,
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10
  };
  nestedScroll(target, options);

  // Define a global option
  nestesScroll.defaultOptions['animationMethod'] = 'easeIn';

Download

Download the library on github.

Disclamer: This is tested on Vivaldi 1.10, Firefox 52 and Chromium 59. Edge should also work, but I had some problems using the example file with IE11. Maybe I'll fix this later, or somebody as does ;-)