Ember Addon helps to keep active item of list visible in viewport

{{#active-scroll-list tolerance=0 scrollTimeout=2000 activeIndex=activeIndex class='list'}}
  {{#each items as |item index|}}
    <div class="item {{if (eq index activeIndex) 'active'}}">{{item}}</div>
  {{/each}}
{{/active-scroll-list}}

can be also be extended as mixin

import Ember from 'ember';
import ActiveScrollListMixin from 'ember-active-scroll-list';

export default Ember.Component.extend(ActiveScrollListMixin, {
  ...
});

• activeIndex Index of element which needs to be visible on the list

• tolerance How much top and bottom edges should be offset when determining overflow

• scrollTimeout Timeout for when autoscroll is activated

You can install either with ember install:

  ember install ember-active-scroll-list