Manage update of scrollbar scroll positions in ScrollbarComponent

src/editor-component.coffee

@@ -18,7 +18,6 @@ module.exports =
 EditorCompont = React.createClass
   pendingScrollTop: null
   pendingScrollLeft: null
-  lastScrollTop: null
   selectOnMouseMove: false
 
   statics: {DummyLineNode}
@@ -50,6 +49,7 @@ EditorCompont = React.createClass
         className: 'vertical-scrollbar'
         orientation: 'vertical'
         onScroll: @onVerticalScroll
+        scrollTop: editor.getScrollTop()
         scrollHeight: editor.getScrollHeight()
 
       ScrollbarComponent
@@ -57,6 +57,7 @@ EditorCompont = React.createClass
         className: 'horizontal-scrollbar'
         orientation: 'horizontal'
         onScroll: @onHorizontalScroll
+        scrollLeft: editor.getScrollLeft()
         scrollWidth: editor.getScrollWidth()
 
   getHiddenInputPosition: ->
@@ -146,34 +147,9 @@ EditorCompont = React.createClass
     @stopBlinkingCursors()
 
   componentDidUpdate: ->
-    @updateVerticalScrollbar()
-    @updateHorizontalScrollbar()
     @measureNewLines()
     @props.parentView.trigger 'editor:display-updated'
 
-  # The React-provided scrollTop property doesn't work in this case because when
-  # initially rendering, the synthetic scrollHeight hasn't been computed yet.
-  # trying to assign it before the element inside is tall enough?
-  updateVerticalScrollbar: ->
-    {editor} = @props
-    scrollTop = editor.getScrollTop()
-
-    return if scrollTop is @lastScrollTop
-
-    scrollbarNode = @refs.verticalScrollbar.getDOMNode()
-    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

src/scrollbar-component.coffee

@@ -3,6 +3,9 @@ React = require 'react'
 
 module.exports =
 ScrollbarComponent = React.createClass
+  lastScrollTop: null
+  lastScrollLeft: null
+
   render: ->
     {orientation, className, onScroll, scrollHeight, scrollWidth} = @props
 
@@ -12,5 +15,23 @@ ScrollbarComponent = React.createClass
           div className: 'scrollbar-content', style: {height: scrollHeight}
         when 'horizontal'
           div className: 'scrollbar-content', style: {width: scrollWidth}
-        else
-          throw new Error("Must specify an orientation property of 'vertical' or 'horizontal'")
+
+  componentDidMount: ->
+    {orientation} = @props
+
+    unless orientation is 'vertical' or orientation is 'horizontal'
+      throw new Error("Must specify an orientation property of 'vertical' or 'horizontal'")
+
+  componentDidUpdate: ->
+    {orientation, scrollTop, scrollLeft} = @props
+    node = @getDOMNode()
+
+    switch orientation
+      when 'vertical'
+        unless scrollTop is @lastScrollTop
+          node.scrollTop = scrollTop
+          @lastScrollTop = node.scrollTop
+      when 'horizontal'
+        unless scrollLeft is @lastScrollLeft
+          node.scrollLeft = scrollLeft
+          @lastScrollLeft = node.scrollLeft