Update the horizontal scrollbar when scrollLeft changes in the model

spec/editor-component-spec.coffee

@@ -381,6 +381,10 @@ describe "EditorComponent", ->
       component.updateAllDimensions()
 
       scrollViewContentNode = node.querySelector('.scroll-view-content')
+      horizontalScrollbarNode = node.querySelector('.horizontal-scrollbar')
       expect(scrollViewContentNode.style['-webkit-transform']).toBe "translate(0px, 0px)"
+      expect(horizontalScrollbarNode.scrollLeft).toBe 0
+
       editor.setScrollLeft(100)
       expect(scrollViewContentNode.style['-webkit-transform']).toBe "translate(-100px, 0px)"
+      expect(horizontalScrollbarNode.scrollLeft).toBe 100

src/editor-component.coffee

@@ -36,7 +36,9 @@ EditorCompont = React.createClass
         InputComponent ref: 'input', className: 'hidden-input', onInput: @onInput, onFocus: @onInputFocused, onBlur: @onInputBlurred
         @renderScrollViewContent()
       div className: 'vertical-scrollbar', ref: 'verticalScrollbar', onScroll: @onVerticalScroll,
-        div outlet: 'verticalScrollbarContent', style: {height: editor.getScrollHeight()}
+        div className: 'scrollbar-content', style: {height: editor.getScrollHeight()}
+      div className: 'horizontal-scrollbar', ref: 'horizontalScrollbar', onScroll: @onHorizontalScroll,
+        div className: 'scrollbar-content', style: {width: editor.getScrollWidth()}
 
   renderGutterContent: ->
     {editor} = @props
@@ -136,6 +138,7 @@ EditorCompont = React.createClass
 
   componentDidUpdate: ->
     @updateVerticalScrollbar()
+    @updateHorizontalScrollbar()
     @measureNewLines()
 
   # The React-provided scrollTop property doesn't work in this case because when
@@ -151,6 +154,16 @@ EditorCompont = React.createClass
     scrollbarNode.scrollTop = scrollTop
     @lastScrollTop = scrollbarNode.scrollTop
 
+  updateHorizontalScrollbar: ->
+    {editor} = @props
+    scrollLeft = editor.getScrollLeft()
+
+    return if scrollLeft is @lastScrollLeft
+
+    scrollbarNode = @refs.horizontalScrollbar.getDOMNode()
+    scrollbarNode.scrollLeft = scrollLeft
+    @lastScrollLeft = scrollbarNode.scrollLeft
+
   observeEditor: ->
     {editor} = @props
     @subscribe editor, 'screen-lines-changed', @onScreenLinesChanged

static/editor.less

@@ -116,6 +116,21 @@
   z-index: 3;
 }
 
+.editor .horizontal-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  height: 15px;
+  overflow-x: auto;
+  z-index: 3;
+
+  .scrollbar-content {
+    height: 15px;
+  }
+}
+
 .editor .scroll-view {
   overflow: hidden;
   -webkit-flex: 1;