ember-active-scroll-list

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

Usage no npm install needed!

<script type="module">
  import emberActiveScrollList from 'https://cdn.skypack.dev/ember-active-scroll-list';
</script>

README

ember-active-scroll-list

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

Demo

Usage

{{#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, {
  ...
});

Options

  • 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

Installation

You can install either with ember install:

  ember install ember-active-scroll-list