• [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 = { 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>
  • 相关阅读:
    Linux命令(25)userdel命令
    Linux命令(24)clear命令
    Linux命令(23)usermod命令
    Linux命令(22)useradd命令
    c++primer 练习9.28
    概率论python代码
    python自写软件(三)
    Linux描述符表和描述符高速缓存
    操作系统的坑(更新)
    python自写软件(二)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6878840.html
Copyright © 2020-2023  润新知