double scroll bars - demo

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">
    
    <!-- display size -->
    <div ng-controller="myCtrl as ctrl">
        The size of scroll bar in your current browser is {{ctrl.scrollBarSize}} pixels.
    </div>
    
    <hr/>
    
    <!-- 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="">
        <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...

CSS

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

JavaScript

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

(function() {
	var myApp = angular.module('myApp', ['doubleScrollBars']);
    myApp.controller('myCtrl', ['$dsb', function($dsb){
        this.scrollBarSize = $dsb.getSize();
    }]);
})();

/* AngularJS directives for double scroll bars by @przno, v0.1.4, https://github.com/przno/double-scroll-bars, MIT license */!function(a){"use strict";a.module("doubleScrollBars",[]).directive("doubleScrollBarHorizontal",["$timeout","$dsb","$$dsbStorage",function(a,b,c){return{restrict:"A",transclude:!0,scope:{doubleScrollBarHorizontal:"@",id:"@"},template:"<div> <div style=\"overflow-y:hidden;\" data-ng-style=\"{height:nativeScrollBarHeight}\">  <div style=\"overflow-y:hidden;position:relative;top:-1px;\" data-ng-style=\"{'overflow-x':doubleScrollBarHorizontal=='always'?'scroll':'auto',height:scrollBarElementHeight}\">   <div data-ng-style=\"{width:wrapper2scrollWidth,height:scrollBarElementHeight}\"/>  </div> </div> <div data-ng-style=\"{'overflow-x':doubleScrollBarHorizontal=='always'?'scroll':'auto'}\">  <div data-ng-transclude/> </div></div>",link:function(d,e){d.nativeScrollBarHeight=b.getSize()+"px",d.scrollBarElementHeight=parseInt(b.getSize()+1)+"px",d.wrapper2scrollWidth="0px";var f=e.children().eq(0),g=f.children().eq(0).children().eq(0),h=f.children().eq(1),i=g[0],j=h[0];g.on("scroll",function(){j.scrollLeft=i.scrollLeft}),h.on("scroll",function(){i.scrollLeft=j.scrollLeft});var k=!0;d.$watch(function(){return d.wrapper2scrollWidth=j.scrollWidth+"px"},function(){a(function(){d.$apply(),k&&(i.scrollLeft=c.get(d.id)||0,j.scrollLeft=c.get(d.id)||0,k=!1)})}),d.$on("$destroy",function(){void 0!==d.id&&c.set(d.id,i.scrollLeft)})}}}]).service("$$dsbStorage",function(){var a={};return{get:function(b){return a[b]},set:function(b,c){a[b]=c}}}).service("$dsb",function(){function a(){var...