   displayName: 'LineComponent'
 
   render: ->
-    {index, screenRow, scrollOffset, lineHeight} = @props
+    {index, screenRow, verticalScrollOffset, horizontalScrollOffset, lineHeight} = @props
 
-    top = index * lineHeight + scrollOffset
-    style = WebkitTransform: "translate3d(0px, #{top}px, 0px)"
+    top = index * lineHeight + verticalScrollOffset
+    left = horizontalScrollOffset
+    style = WebkitTransform: "translate3d(#{left}px, #{top}px, 0px)"
 
     div className: 'line', style: style, 'data-screen-row': screenRow, dangerouslySetInnerHTML: {__html: @buildInnerHTML()}
 


  render: ->
    if @isMounted()
      {editor, renderedRowRange, scrollTop, lineHeight, showIndentGuide} = @props
      [startRow, endRow] = renderedRowRange
      scrollOffset = -scrollTop % lineHeight

      lines =
        for tokenizedLine, index in editor.linesForScreenRows(startRow, endRow - 1)
          screenRow = startRow + index
          LineComponent({key: tokenizedLine.id, tokenizedLine, showIndentGuide, lineHeight, index, scrollOffset, screenRow})

    div {className: 'lines'}, lines


      "<span>#{scopeTree.getValueAsHtml({hasIndentGuide: @props.showIndentGuide})}</span>"

  shouldComponentUpdate: (newProps) ->
    not isEqualForProperties(newProps, @props, 'showIndentGuide', 'lineHeight', 'screenRow', 'index', 'verticalScrollOffset', 'horizontalScrollOffset')
