scroll-index.js

import {inject, customAttribute, children} from 'aurelia-framework';

function calcOuterHeight(element){
  var height;
  height = element.getBoundingClientRect().height;
  height += getStyleValue(element, 'marginTop');
  height += getStyleValue(element, 'marginBottom');
  return height;
}

function calcScrollHeight(element){
  var height;
  height = element.getBoundingClientRect().height;
  height -= getStyleValue(element, 'borderTopWidth');
  height -= getStyleValue(element, 'borderBottomWidth');
  return height;
}

function getStyleValue(element, style){
  var currentStyle, styleValue;
  currentStyle = element.currentStyle || window.getComputedStyle(element);
  styleValue = parseInt(currentStyle[style]);
  return Number.isNaN(styleValue) ? 0 : styleValue;
}

@customAttribute('scroll-index')
@inject(Element)
export class ScrollIndex {
  @children('*')
  items;
  
  constructor(element) {
    this.element = element;
    this.scrollListener = () => this._onScroll();
  }
  
  attached() {
    this.itemHeight = calcOuterHeight(this.items[0]);    
    console.log(`itemHeight: ${this.itemHeight}`);
    

    this.scrollHeight = calcScrollHeight(this.element);
    console.log(`scrollHeight: ${this.scrollHeight}`);
    
    this.element.addEventListener('scroll', this.scrollListener);
  }
  
  detached() {
    this.element.removeEventListener('scroll', this.scrollListener);
    this.itemHeight = 0;
    
  }
  
  _onScroll() {
    let scrollTop = this.element.scrollTop;
    this.value = scrollTop / this.itemHeight;
  }
}

Sample usage:

 <div class="list-block" style="height:352px;" >
        <ul style="height:100%;overflow:scroll;" scroll-index.two-way="scrollIndex">
          <li repeat.for="task of tasks" class="list-group-item ${selectedTask==task?'active':''}" click.delegate="selectedTask=task">