A directive to scroll the overflowing content of a box using CSS transformations and animations.
1 person uses it
Submitted by: 234220?v=3 fladi


Build Status

Angular.js directive that automatically scrolls the content inside the box it was applied to along the vertical axis. This only happens if the content overflows its parent box.

It does so by applying CSS 2D transformations along the Y-axis. For browser compatibility see on 2D Transforms and CSS animations.

Getting started

  • Include the script on your page after the AngularJS tag:

  • Ensure that your application module specifies ngBoxBounce as a dependency:

    • Apply the directive to any box that potentially has an overflow and a fixed height.

      <!-- content to be scrolled -->


The duration of the animation can be controlled by binding the duration attribute:

Easing function

The easing function can be defined by binding its name to the easing attribute:

See the CSS property animation-timing-function for a complete list of possible names and combinations.


ngBoxBounce is licensed under the MIT license. See the LICENSE file for more details.

comments powered by Disqus
This page was last updated about 3 years ago.