[AngularJS] Directive for top scroll bar

angular.directive('dblScroll', dblScroll)


dblSroll.$inject = [
    '$timeout'
];
function dblScroll($timeout) {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            dblScroll: '<'
        },
        template: `
            <div >
              <div class="dblscroll__div--wrapper" 
                   ng-hide="!dblScroll"
                   ng-style="outterStyle"
                   style="height: 20px; position: absolute; left: 0; right: 0; top: -20px; overflow-y: hidden; overflow-x: auto;" >
                 <div class="dblscroll__div--inner" ng-style="innerStyle">&nbsp;</div>
              </div>
              <div ng-transclude></div>
            </div>
        `,
        link: function (scope, el) {

            function selectParent() {
                const dom = document.querySelector('[dbl-scroll-container]');
                if (dom) {
                    return dom;
                }
                return el.parent()[0];
            }

            let wLsn, winLsn, tLsn;
            let firstTime = null;
            const table = el[0];
            const target = selectParent();

            if (scope.dblScroll) {
                const wrapper = document.querySelector('.dblscroll__div--wrapper');

                const targetScrollHandler = () => {
                    wrapper.scrollLeft = target.scrollLeft
                };
                const wrapperScrollHandler = () => {
                    target.scrollLeft = wrapper.scrollLeft
                };
                const windowResizeHandler = () => {
                    $timeout(() => {
                        update();
                }, 66)
                };

                tLsn = target.addEventListener('scroll', targetScrollHandler);
                wLsn = wrapper.addEventListener('scroll', wrapperScrollHandler);
                winLsn = window.addEventListener('resize', windowResizeHandler);

                const update = () => {
                    const scrollWidth = table.scrollWidth;
                    const clientWidth = target.clientWidth;
                    scope.innerStyle = {width: scrollWidth + 'px'};
                    scope.outterStyle = {width: clientWidth + 'px'};
                };

                scope.$watch(() => {
                    if (!firstTime) {
                    firstTime = target.scrollWidth + target.clientWidth;
                }
                return target.scrollWidth + target.clientWidth - firstTime;
            }, () => {
                    $timeout(() => {
                        update();
                }, 66)
                });

                scope.$on('$destroy', function(){
                    if (tLsn) {
                        tLsn.removeEventListener('scroll', targetScrollHandler);
                    }
                    if (wLsn) {
                        wLsn.removeEventListener('scroll', wrapperScrollHandler);
                    }
                    if(winLsn) {
                        winLsn.removeEventListener('resize', windowResizeHandler);
                    }
                });
            }
        }
    }
}

export default dblScroll;

 

Using it:

  <div style="position: relative;" >
    <div style="width: 300px; height: auto; overflow-x: auto;" >
      <div style="width: 600px; height: 300px;" dbl-scroll=true>div</div>
    </div>
  </div>