github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Use cleaner scrolling system that doesn't involve hiding a scroll bar

Browse source
This commit is contained in:
James Allen 2016-11-17 10:24:48 +00:00
parent 70bf0be6dd
commit a87ed88a53
2 changed files with 11 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee
View file

@ -99,8 +99,11 @@ define [
# noticeable, but keeps it perfectly in step with Ace.
ace.require("ace/lib/event").addMouseWheelListener scroller[0], (e) ->
deltaY = e.wheelY
# console.log "mousewheel", deltaY
scroller.scrollTop(scroller.scrollTop() + deltaY * 4)
old_top = parseInt(list.css("top"))
top = Math.min(0, old_top - deltaY * 4)
console.log {old_top, top}
list.css(top: top)
scrollAce(-top)
e.preventDefault()
# Use these to avoid unnecessary updates. Scrolling one
@ -115,15 +118,15 @@ define [
else
ignoreNextPanelEvent = true
list.height(height)
scroller.scrollTop(scrollTop)
# console.log({height, scrollTop, top: height - scrollTop})
list.css(top: - scrollTop)
scrollAce = (e) ->
scrollAce = (scrollTop) ->
if ignoreNextPanelEvent
ignoreNextPanelEvent = false
else
ignoreNextAceEvent = true
scope.scrollBindings.reviewPanelEvents.emit "scroll", e.target.scrollTop
scope.scrollBindings.reviewPanelEvents.emit "scroll", scrollTop
scroller.on "scroll", scrollAce
scope.scrollBindings.onAceScroll = scrollPanel
}

11
services/web/public/stylesheets/app/editor/review-panel.less
View file

@ -24,9 +24,6 @@
@review-panel-width : 230px;
@review-off-width : 22px;
@rp-scroller-offset : 30px;
.triangle(@_, @width, @height, @color) {
position: absolute;
border-color: transparent;
@ -70,7 +67,6 @@
border-left: solid 1px @rp-border-grey;
font-size: @rp-base-font-size;
color: @rp-type-blue;
overflow: hidden; // Stop inner hidden scroll bar showing
}
.review-panel-toolbar {
@ -88,10 +84,7 @@
}
.rp-entry-list {
// TODO: Use a more cross-browser method of hiding the scroll bar
width: @review-off-width + @rp-scroller-offset;
padding-right: @rp-scroller-offset;
overflow-y: scroll;
width: @review-off-width;
position: absolute;
top: 0;
bottom: 0;
@ -448,7 +441,7 @@
}
.rp-entry-list {
width: @review-panel-width + @rp-scroller-offset;
width: @review-panel-width;
}
.rp-entry {