JSFiddle - React, Tailwind, and code Playground

by patbuchanan

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js"></script>
<div ng-app="myApp" combine-horizontal-scrolls="horizontal-scroll">
    <div class="horizontal-scroll top"><div class="content">Here is a bunch of text or whatever</div></div>
    <div class="horizontal-scroll middle"><div class="content">Here is a bunch of text or whatever</div></div>
    <div class="horizontal-scroll bottom"><div class="content">Here is a bunch of text or whatever</div></div>
</div>

CSS

.top{
    background: yellow;
    height: 100px;
    overflow-x: auto;
}
.middle{
    background: #5555ff;
    height: 100px;
    overflow-x: auto;
}
.bottom{
    background: red;
    height: 100px;
    overflow-x: auto;
}
.content{
    width: 300%;
    height: 100%;
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.directive('combineHorizontalScrolls', [function(){
		var scrollLeft = 0;
		function combine(elements){
			elements.on('scroll', function(e){
				if(e.isTrigger){
					e.target.scrollLeft = scrollLeft;
				}else {
					scrollLeft = e.target.scrollLeft;
					elements.each(function (element) {
						if( !this.isSameNode(e.target) ){
							$(this).trigger('scroll');
						}
					});
				}
			});
		}

		return {
			restrict: 'A',
			replace: false,
			compile: function(element, attrs){
				combine(element.find('.'+attrs.combineHorizontalScrolls));
			}
		};
	}]);