github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-04-06 03:02:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

Set visibility: hidden on dummy scrollbars if native ones are invisible

Browse Source 
This prevents the cursor from unexpectedly changing when approaching the
bottom/right corner of the editor with the mouse, even when no scrollbar
is being shown.
This commit is contained in:
Antonio Scandurra
2017-08-17 15:11:32 +02:00
parent e9e63a5f90
commit 1ffc8997d2
2 changed files with 46 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/text-editor-component.js
View File

@@ -740,19 +740,21 @@ class TextEditorComponent {
ref: 'verticalScrollbar',
orientation: 'vertical',
didScroll: this.didScrollDummyScrollbar,
didMousedown: this.didMouseDownOnContent,
didMouseDown: this.didMouseDownOnContent,
scrollHeight,
scrollTop,
horizontalScrollbarHeight,
verticalScrollbarWidth,
forceScrollbarVisible
}),
$(DummyScrollbarComponent, {
ref: 'horizontalScrollbar',
orientation: 'horizontal',
didScroll: this.didScrollDummyScrollbar,
didMousedown: this.didMouseDownOnContent,
didMouseDown: this.didMouseDownOnContent,
scrollWidth,
scrollLeft,
horizontalScrollbarHeight,
verticalScrollbarWidth,
forceScrollbarVisible
})
@@ -2912,55 +2914,67 @@ class DummyScrollbarComponent {
}
render () {
const {
orientation, scrollWidth, scrollHeight,
verticalScrollbarWidth, horizontalScrollbarHeight, forceScrollbarVisible,
didScroll, didMouseDown
} = this.props
const outerStyle = {
position: 'absolute',
contain: 'strict',
zIndex: 1
}
const innerStyle = {}
if (this.props.orientation === 'horizontal') {
let right = (this.props.verticalScrollbarWidth || 0)
if (orientation === 'horizontal') {
let right = (verticalScrollbarWidth || 0)
outerStyle.bottom = 0
outerStyle.left = 0
outerStyle.right = right + 'px'
outerStyle.height = '15px'
outerStyle.overflowY = 'hidden'
outerStyle.overflowX = this.props.forceScrollbarVisible ? 'scroll' : 'auto'
outerStyle.overflowX = forceScrollbarVisible ? 'scroll' : 'auto'
outerStyle.cursor = 'default'
if (horizontalScrollbarHeight === 0) {
outerStyle.visibility = 'hidden'
}
innerStyle.height = '15px'
innerStyle.width = (this.props.scrollWidth || 0) + 'px'
innerStyle.width = (scrollWidth || 0) + 'px'
} else {
let bottom = (this.props.horizontalScrollbarHeight || 0)
let bottom = (horizontalScrollbarHeight || 0)
outerStyle.right = 0
outerStyle.top = 0
outerStyle.bottom = bottom + 'px'
outerStyle.width = '15px'
outerStyle.overflowX = 'hidden'
outerStyle.overflowY = this.props.forceScrollbarVisible ? 'scroll' : 'auto'
outerStyle.overflowY = forceScrollbarVisible ? 'scroll' : 'auto'
outerStyle.cursor = 'default'
if (verticalScrollbarWidth === 0) {
outerStyle.visibility = 'hidden'
}
innerStyle.width = '15px'
innerStyle.height = (this.props.scrollHeight || 0) + 'px'
innerStyle.height = (scrollHeight || 0) + 'px'
}
return $.div(
{
className: `${this.props.orientation}-scrollbar`,
className: `${orientation}-scrollbar`,
style: outerStyle,
on: {
scroll: this.props.didScroll,
mousedown: this.didMousedown
scroll: didScroll,
mousedown: didMouseDown
}
},
$.div({style: innerStyle})
)
}
didMousedown (event) {
didMouseDown (event) {
let {bottom, right} = this.element.getBoundingClientRect()
const clickedOnScrollbar = (this.props.orientation === 'horizontal')
? event.clientY >= (bottom - this.getRealScrollbarHeight())
: event.clientX >= (right - this.getRealScrollbarWidth())
if (!clickedOnScrollbar) this.props.didMousedown(event)
if (!clickedOnScrollbar) this.props.didMouseDown(event)
}
getRealScrollbarWidth () {