Просмотр исходного кода

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

James Allen 10 лет назад
Родитель
Сommit
a87ed88a53

+ 9 - 6
services/web/public/coffee/ide/review-panel/directives/reviewPanelSorted.coffee

@@ -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
 		}

+ 2 - 9
services/web/public/stylesheets/app/editor/review-panel.less

@@ -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 {