double scroll bars

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">
    <input type="text" data-ng-model="variable" placeholder="type here"/>
    
    <input type="checkbox" data-ng-model="checked"/> show/hide
    
    <hr/>
    
    <!-- static content -->
    <div style="width: 200px;">
        <div data-double-scroll-bar-horizontal>
            some very looooooooooooooooooooooooooooooooong content
        </div>
    </div>
    
    <hr/>
    
    <!-- transcluded content -->
    <div style="width: 100px;" ng-if="checked">
        <div double-scroll-bar-horizontal id="id">
            {{variable}}
        </div>
        This directive is recompilesd each time check/uncheck checkbox. As you can see the position of ruler stays the same, because we provided unique id to the directive.
    </div>
    
    <hr/>
    
    <!-- transcluded content with always -->
    <div style="width: 100px;">
        <div double-scroll-bar-horizontal="always">
            {{variable}}
        </div>
    </div>
    
</div>

CSS

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

JavaScript

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

/* 
 * AngularJS directives for double horizontal and double vertical scroll bar
 * Author: przno
 * Version: 0.1.0
 * License: MIT
 */

(function(angular) {
	'use strict';

	angular.module('doubleScrollBars', [])

.directive('doubleScrollBarHorizontal', ['$timeout', 'scrollStorage',
    function($timeout, scrollStorage) {

        return {

            // usage:
            // <div data-double-scroll-bar-horizontal> {{content}} or static content </div>
            // or with input value:
            // <div data-double-scroll-bar-horizontal="always"> {{content}} or static content </div>
            restrict: 'A',

            // transclude the content
            transclude: true,

            // isolate scope
            scope: {
                doubleScrollBarHorizontal: '@', // if equals 'always' will display inactive scroll bars even if there is nothing to scroll; otherwise show them only when content overflows display area
                id: '@' // optional id
            },

            // HTML template
            // 20px is the standard height of horizontal scroll bar on most systems, TODO calculate this value automatically, TODO do not consume height if bar not displayed
            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 with the logic
            link: function($scope, iElm, iAttrs, controller) {

                //...