double scroll bars - demo

by przno

HTML

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<div ng-app="myApp">
    
    <!-- static content -->
    Static content:
    <div style="width: 200px;">
        <div data-double-scroll-bar-horizontal>
            looooooooooooooooooooooooooooooooong content
        </div>
    </div>
    
    <hr/>
    
    <!-- transcluded content -->
    <input type="text" data-ng-model="variable1" placeholder="type here"/>
    <br/>Transcluded content:
    <div style="width: 100px;">
        <div double-scroll-bar-horizontal>
            {{variable1}}
        </div>
    </div>
    
    <hr/>
    
    <!-- transcluded content with always -->
    <input type="text" data-ng-model="variable2" placeholder="type here"/>
    <br/>Transcluded content with "always"
    <div style="width: 100px;">
        <div double-scroll-bar-horizontal="always">
            {{variable2}}
        </div>
    </div>
    
    <hr/>
    
    <!-- with id -->
    <input type="text" data-ng-model="variable3" placeholder="type here"/>
    <br/><input type="checkbox" data-ng-model="checked1"/> show/hide (will recompile directive)
    <br/>This directive is recompiled each time you check/uncheck checkbox. As you can see the position of ruler stays the same after recompile, because we provided unique id to the directive.
    <div style="width: 100px;" ng-if="checked1">
        <div double-scroll-bar-horizontal id="id">
            {{variable3}}
        </div>
    </div>
    
    <hr/>
    
   <!-- without id -->
    <input type="text" data-ng-model="variable4" placeholder="type here"/>
    <br/><input type="checkbox" data-ng-model="checked2"/> show/hide (will recompile directive)
    <br/>This directive is recompiled each time you check/uncheck checkbox. As you can see the position of ruler DOES NOT stay the same after recompile, because we did not provide unique id to the directive.
    <div style="width:...

CSS

hr{
    margin-top: 20px;
    margin-bottom: 20px;
}

JavaScript

// https://github.com/przno/double-scroll-bars

(function() {
	var myApp = angular.module('myApp', ['doubleScrollBars']);
})();

/* AngularJS directives for double horizontal (top & bottom) or double vertical (left & rigth) scroll bars by @przno (Martin Praznovsky), v0.1.1, MIT License */!function(a){"use strict";a.module("doubleScrollBars",[]).directive("doubleScrollBarHorizontal",["$timeout","scrollStorage",function(a,b){return{restrict:"A",transclude:!0,scope:{doubleScrollBarHorizontal:"@",id:"@"},template:"<div> <div style=\"overflow-y: hidden; height: 20px;\" data-ng-style=\"{'overflow-x': doubleScrollBarHorizontal == 'always' ? 'scroll' : 'auto'}\">   <div style=\"height: 20px;\" data-ng-style=\"{width: wrapper2scrollWidth}\"></div> </div> <div data-ng-style=\"{'overflow-x': doubleScrollBarHorizontal == 'always' ? 'scroll' : 'auto'}\">   <div data-ng-transclude></div> </div></div>",link:function(c,d){c.wrapper2scrollWidth="0px";var e=d.children().eq(0),f=e.children().eq(0),g=e.children().eq(1),h=f[0],i=g[0];f.on("scroll",function(){i.scrollLeft=h.scrollLeft}),g.on("scroll",function(){h.scrollLeft=i.scrollLeft});var j=!0;c.$watch(function(){return c.wrapper2scrollWidth=i.scrollWidth+"px"},function(){a(function(){c.$apply(),j&&(h.scrollLeft=b.get(c.id)||0,i.scrollLeft=b.get(c.id)||0,j=!1)})}),c.$on("$destroy",function(){void 0!==c.id&&b.set(c.id,h.scrollLeft)})}}}]).service("scrollStorage",function(){var a={};return{get:function(b){return a[b]},set:function(b,c){a[b]=c}}})}(angular);