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"> </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 = { scrollWidth + 'px'}; scope.outterStyle = { 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=" 300px; height: auto; overflow-x: auto;" > <div style=" 600px; height: 300px;" dbl-scroll=true>div</div> </div> </div>