diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee index aa4d879fb..a3ddf3949 100644 --- a/spec/editor-component-spec.coffee +++ b/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 diff --git a/src/editor-component.coffee b/src/editor-component.coffee index 666c92d76..e232c7ceb 100644 --- a/src/editor-component.coffee +++ b/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 diff --git a/static/editor.less b/static/editor.less index 1396ae39e..f395d5d10 100644 --- a/static/editor.less +++ b/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;