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