JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div ng-app="dragscroll">

<div class="wrapper" drag-scroll>
    <div class="content">
        
        
    </div>
    
</div>
</div>

CSS

.wrapper{
    position:fixed;
    background:#e91e63;
    overflow-x:auto;
    overflow-y:hidden;
    top:0;
    height:100%;
    left:0;
    width:100%;
    
}
.content{
    height:100px;
    width:3000px;
    background:#3f51b5;
}

JavaScript

var app = angular.module("dragscroll",[])

 .controller("dragscrollController",["$scope",function($scope){
 	
 }])
 .directive("dragScroll",[function(){
 	return {
 		controller:"dragscrollController",
 		scope:false,
 		compile:function(elem,attrs,transclude){
 			return function link(scope,elem,attrs,ctrl){
 				var $scope = scope;
 				$scope.dragging = false;
 				var mousedownHandler = function(e){
 					$(window).on("mousemove",dragStartHandler);
 					$(window).on("mouseup",clickHandler);
 					$scope.mousedownEvent = e;
 					$scope.mousedownScrollLeft = $(elem).scrollLeft();
 					console.log("mousedown");
 				}
 				var clickHandler = function(e){
 					$(window).off("mousemove",dragStartHandler);
 					$(window).off("mouseup",clickHandler);
 					console.log("simpleclick");
 				}
 				var dragStartHandler = function(e){
 					if(!$scope.dragging){
 						$(window).off("mouseup",clickHandler);
						$(window).on("mouseup",dragEndHandler);
						console.log("dragStart");
						$scope.dragging = true;
 					}
 					horizontalScroll(e);
 					
 				}
 				var dragEndHandler = function(e){
 					if($scope.dragging){
 						$(window).off("mousemove",dragStartHandler);
						$(window).off("mouseup",clickHandler);
						$(window).off("mouseup",dragEndHandler);					
						console.log("dragEnd");	
						$scope.dragging = false;
 					}
 					
 				}
 				var horizontalScroll = function(e){
 					console.log(e.clientX - $scope.mousedownEvent.clientX);
 					if(e.pageX>0 && e.pageX < screen.width){
 						$(elem).scrollLeft(($scope.mousedownScrollLeft+(-1*(e.clientX - $scope.mousedownEvent.clientX))));	
 					}else{
 						console.log("no scroll");
 					}
 					
 				}
 				$(elem).on("mousedown",mousedownHandler);
 			}
 		}
 	}
 }]);