For fixed width table, scroll bar is used for overflow content. One problem is if there are many rows, users need to scroll to the bottom of page to access scroll bar. Created double scroll bar directive for table component.

dbl-scroll.js

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;

index.html

  <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>