JSFiddle - React, Tailwind, and code Playground

by Ruchika Sharma

HTML

<div class="table-responsive">
    <table class="table table-bordered table-striped" double-scroll>
        <!-- table with maaaaany rows needs top scrollbar!! -->
    </table>
</div>

JavaScript

import {inject} from 'aurelia-framework';

@inject(Element)
export class DoubleScrollCustomAttribute {
    constructor(element) {
        this.element = element; // this is the element the double-scroll attribute appears on.
    }

    attached() {
        alert('attached'); // is never fired!
        let element = this.element;
        // contents of your DoubleScroll function from your original post
        let scrollbar = document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow = 'auto';
        scrollbar.style.overflowY = 'hidden';
        scrollbar.firstChild.style.width = element.scrollWidth + 'px';
        scrollbar.firstChild.style.paddingTop = '1px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll = function() {
            element.scrollLeft = scrollbar.scrollLeft;
        };
        element.onscroll = function() {
            scrollbar.scrollLeft = element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }

  detached() {
    // let element = this.element;
    // optional:  tear-down double scroll (unsubscribe events, etc)
  }
}