Merge pull request microsoft#70047 from gubikmic/scrollPredominantAxisOnly

Scroll predominant axis only (prevents scroll drift)

Author: alexdima

src/vs/base/browser/ui/scrollbar/scrollableElement.ts

@@ -287,6 +287,7 @@ export abstract class AbstractScrollableElement extends Widget {
 		this._options.handleMouseWheel = massagedOptions.handleMouseWheel;
 		this._options.mouseWheelScrollSensitivity = massagedOptions.mouseWheelScrollSensitivity;
 		this._options.fastScrollSensitivity = massagedOptions.fastScrollSensitivity;
+		this._options.scrollPredominantAxis = massagedOptions.scrollPredominantAxis;
 		this._setListeningToMouseWheel(this._options.handleMouseWheel);
 
 		if (!this._options.lazyRender) {
@@ -334,6 +335,14 @@ export abstract class AbstractScrollableElement extends Widget {
 			let deltaY = e.deltaY * this._options.mouseWheelScrollSensitivity;
 			let deltaX = e.deltaX * this._options.mouseWheelScrollSensitivity;
 
+			if (this._options.scrollPredominantAxis) {
+				if (Math.abs(deltaY) >= Math.abs(deltaX)) {
+					deltaX = 0;
+				} else {
+					deltaY = 0;
+				}
+			}
+
 			if (this._options.flipAxes) {
 				[deltaY, deltaX] = [deltaX, deltaY];
 			}
@@ -553,6 +562,7 @@ function resolveOptions(opts: ScrollableElementCreationOptions): ScrollableEleme
 		scrollYToX: (typeof opts.scrollYToX !== 'undefined' ? opts.scrollYToX : false),
 		mouseWheelScrollSensitivity: (typeof opts.mouseWheelScrollSensitivity !== 'undefined' ? opts.mouseWheelScrollSensitivity : 1),
 		fastScrollSensitivity: (typeof opts.fastScrollSensitivity !== 'undefined' ? opts.fastScrollSensitivity : 5),
+		scrollPredominantAxis: (typeof opts.scrollPredominantAxis !== 'undefined' ? opts.scrollPredominantAxis : true),
 		mouseWheelSmoothScroll: (typeof opts.mouseWheelSmoothScroll !== 'undefined' ? opts.mouseWheelSmoothScroll : true),
 		arrowSize: (typeof opts.arrowSize !== 'undefined' ? opts.arrowSize : 11),
 

src/vs/base/browser/ui/scrollbar/scrollableElementOptions.ts

@@ -55,6 +55,13 @@ export interface ScrollableElementCreationOptions {
 	 * Defaults to 5.
 	 */
 	fastScrollSensitivity?: number;
+	/**
+	 * Whether the scrollable will only scroll along the predominant axis when scrolling both
+	 * vertically and horizontally at the same time.
+	 * Prevents horizontal drift when scrolling vertically on a trackpad.
+	 * Defaults to true.
+	 */
+	scrollPredominantAxis?: boolean;
 	/**
 	 * Height for vertical arrows (top/bottom) and width for horizontal arrows (left/right).
 	 * Defaults to 11.
@@ -113,6 +120,7 @@ export interface ScrollableElementChangeOptions {
 	handleMouseWheel?: boolean;
 	mouseWheelScrollSensitivity?: number;
 	fastScrollSensitivity: number;
+	scrollPredominantAxis: boolean;
 }
 
 export interface ScrollableElementResolvedOptions {
@@ -125,6 +133,7 @@ export interface ScrollableElementResolvedOptions {
 	alwaysConsumeMouseWheel: boolean;
 	mouseWheelScrollSensitivity: number;
 	fastScrollSensitivity: number;
+	scrollPredominantAxis: boolean;
 	mouseWheelSmoothScroll: boolean;
 	arrowSize: number;
 	listenOnDomNode: HTMLElement | null;

src/vs/editor/browser/viewParts/editorScrollbar/editorScrollbar.ts

@@ -34,6 +34,7 @@ export class EditorScrollbar extends ViewPart {
 		const scrollbar = options.get(EditorOption.scrollbar);
 		const mouseWheelScrollSensitivity = options.get(EditorOption.mouseWheelScrollSensitivity);
 		const fastScrollSensitivity = options.get(EditorOption.fastScrollSensitivity);
+		const scrollPredominantAxis = options.get(EditorOption.scrollPredominantAxis);
 
 		const scrollbarOptions: ScrollableElementCreationOptions = {
 			listenOnDomNode: viewDomNode.domNode,
@@ -54,6 +55,7 @@ export class EditorScrollbar extends ViewPart {
 			arrowSize: scrollbar.arrowSize,
 			mouseWheelScrollSensitivity: mouseWheelScrollSensitivity,
 			fastScrollSensitivity: fastScrollSensitivity,
+			scrollPredominantAxis: scrollPredominantAxis,
 		};
 
 		this.scrollbar = this._register(new SmoothScrollableElement(linesContent.domNode, scrollbarOptions, this._context.viewLayout.getScrollable()));
@@ -140,10 +142,12 @@ export class EditorScrollbar extends ViewPart {
 			const scrollbar = options.get(EditorOption.scrollbar);
 			const mouseWheelScrollSensitivity = options.get(EditorOption.mouseWheelScrollSensitivity);
 			const fastScrollSensitivity = options.get(EditorOption.fastScrollSensitivity);
+			const scrollPredominantAxis = options.get(EditorOption.scrollPredominantAxis);
 			const newOpts: ScrollableElementChangeOptions = {
 				handleMouseWheel: scrollbar.handleMouseWheel,
 				mouseWheelScrollSensitivity: mouseWheelScrollSensitivity,
-				fastScrollSensitivity: fastScrollSensitivity
+				fastScrollSensitivity: fastScrollSensitivity,
+				scrollPredominantAxis: scrollPredominantAxis
 			};
 			this.scrollbar.updateOptions(newOpts);
 		}

src/vs/editor/common/config/editorOptions.ts

@@ -319,6 +319,11 @@ export interface IEditorOptions {
 	 * Defaults to 5.
 	 */
 	fastScrollSensitivity?: number;
+	/**
+	 * Enable that the editor scrolls only the predominant axis. Prevents horizontal drift when scrolling vertically on a trackpad.
+	 * Defaults to true.
+	 */
+	scrollPredominantAxis?: boolean;
 	/**
 	 * The modifier to be used to add multiple cursors with the mouse.
 	 * Defaults to 'alt'
@@ -3193,6 +3198,7 @@ export const enum EditorOption {
 	scrollbar,
 	scrollBeyondLastColumn,
 	scrollBeyondLastLine,
+	scrollPredominantAxis,
 	selectionClipboard,
 	selectionHighlight,
 	selectOnLineNumbers,
@@ -3651,6 +3657,10 @@ export const EditorOptions = {
 		EditorOption.scrollBeyondLastLine, 'scrollBeyondLastLine', true,
 		{ description: nls.localize('scrollBeyondLastLine', "Controls whether the editor will scroll beyond the last line.") }
 	)),
+	scrollPredominantAxis: register(new EditorBooleanOption(
+		EditorOption.scrollPredominantAxis, 'scrollPredominantAxis', true,
+		{ description: nls.localize('scrollPredominantAxis', "Scroll only along the predominant axis when scrolling both vertically and horizontally at the same time. Prevents horizontal drift when scrolling vertically on a trackpad.") }
+	)),
 	selectionClipboard: register(new EditorBooleanOption(
 		EditorOption.selectionClipboard, 'selectionClipboard', true,
 		{

src/vs/editor/common/standalone/standaloneEnums.ts

@@ -247,34 +247,35 @@ export enum EditorOption {
 	scrollbar = 79,
 	scrollBeyondLastColumn = 80,
 	scrollBeyondLastLine = 81,
-	selectionClipboard = 82,
-	selectionHighlight = 83,
-	selectOnLineNumbers = 84,
-	showFoldingControls = 85,
-	showUnused = 86,
-	snippetSuggestions = 87,
-	smoothScrolling = 88,
-	stopRenderingLineAfter = 89,
-	suggest = 90,
-	suggestFontSize = 91,
-	suggestLineHeight = 92,
-	suggestOnTriggerCharacters = 93,
-	suggestSelection = 94,
-	tabCompletion = 95,
-	useTabStops = 96,
-	wordSeparators = 97,
-	wordWrap = 98,
-	wordWrapBreakAfterCharacters = 99,
-	wordWrapBreakBeforeCharacters = 100,
-	wordWrapColumn = 101,
-	wordWrapMinified = 102,
-	wrappingIndent = 103,
-	wrappingStrategy = 104,
-	editorClassName = 105,
-	pixelRatio = 106,
-	tabFocusMode = 107,
-	layoutInfo = 108,
-	wrappingInfo = 109
+	scrollPredominantAxis = 82,
+	selectionClipboard = 83,
+	selectionHighlight = 84,
+	selectOnLineNumbers = 85,
+	showFoldingControls = 86,
+	showUnused = 87,
+	snippetSuggestions = 88,
+	smoothScrolling = 89,
+	stopRenderingLineAfter = 90,
+	suggest = 91,
+	suggestFontSize = 92,
+	suggestLineHeight = 93,
+	suggestOnTriggerCharacters = 94,
+	suggestSelection = 95,
+	tabCompletion = 96,
+	useTabStops = 97,
+	wordSeparators = 98,
+	wordWrap = 99,
+	wordWrapBreakAfterCharacters = 100,
+	wordWrapBreakBeforeCharacters = 101,
+	wordWrapColumn = 102,
+	wordWrapMinified = 103,
+	wrappingIndent = 104,
+	wrappingStrategy = 105,
+	editorClassName = 106,
+	pixelRatio = 107,
+	tabFocusMode = 108,
+	layoutInfo = 109,
+	wrappingInfo = 110
 }
 
 /**

src/vs/monaco.d.ts

@@ -2794,6 +2794,11 @@ declare namespace monaco.editor {
 		 * Defaults to 5.
 		 */
 		fastScrollSensitivity?: number;
+		/**
+		 * Enable that the editor scrolls only the predominant axis. Prevents horizontal drift when scrolling vertically on a trackpad.
+		 * Defaults to true.
+		 */
+		scrollPredominantAxis?: boolean;
 		/**
 		 * The modifier to be used to add multiple cursors with the mouse.
 		 * Defaults to 'alt'
@@ -3772,34 +3777,35 @@ declare namespace monaco.editor {
 		scrollbar = 79,
 		scrollBeyondLastColumn = 80,
 		scrollBeyondLastLine = 81,
-		selectionClipboard = 82,
-		selectionHighlight = 83,
-		selectOnLineNumbers = 84,
-		showFoldingControls = 85,
-		showUnused = 86,
-		snippetSuggestions = 87,
-		smoothScrolling = 88,
-		stopRenderingLineAfter = 89,
-		suggest = 90,
-		suggestFontSize = 91,
-		suggestLineHeight = 92,
-		suggestOnTriggerCharacters = 93,
-		suggestSelection = 94,
-		tabCompletion = 95,
-		useTabStops = 96,
-		wordSeparators = 97,
-		wordWrap = 98,
-		wordWrapBreakAfterCharacters = 99,
-		wordWrapBreakBeforeCharacters = 100,
-		wordWrapColumn = 101,
-		wordWrapMinified = 102,
-		wrappingIndent = 103,
-		wrappingStrategy = 104,
-		editorClassName = 105,
-		pixelRatio = 106,
-		tabFocusMode = 107,
-		layoutInfo = 108,
-		wrappingInfo = 109
+		scrollPredominantAxis = 82,
+		selectionClipboard = 83,
+		selectionHighlight = 84,
+		selectOnLineNumbers = 85,
+		showFoldingControls = 86,
+		showUnused = 87,
+		snippetSuggestions = 88,
+		smoothScrolling = 89,
+		stopRenderingLineAfter = 90,
+		suggest = 91,
+		suggestFontSize = 92,
+		suggestLineHeight = 93,
+		suggestOnTriggerCharacters = 94,
+		suggestSelection = 95,
+		tabCompletion = 96,
+		useTabStops = 97,
+		wordSeparators = 98,
+		wordWrap = 99,
+		wordWrapBreakAfterCharacters = 100,
+		wordWrapBreakBeforeCharacters = 101,
+		wordWrapColumn = 102,
+		wordWrapMinified = 103,
+		wrappingIndent = 104,
+		wrappingStrategy = 105,
+		editorClassName = 106,
+		pixelRatio = 107,
+		tabFocusMode = 108,
+		layoutInfo = 109,
+		wrappingInfo = 110
 	}
 	export const EditorOptions: {
 		acceptSuggestionOnCommitCharacter: IEditorOption<EditorOption.acceptSuggestionOnCommitCharacter, boolean>;
@@ -3884,6 +3890,7 @@ declare namespace monaco.editor {
 		scrollbar: IEditorOption<EditorOption.scrollbar, InternalEditorScrollbarOptions>;
 		scrollBeyondLastColumn: IEditorOption<EditorOption.scrollBeyondLastColumn, number>;
 		scrollBeyondLastLine: IEditorOption<EditorOption.scrollBeyondLastLine, boolean>;
+		scrollPredominantAxis: IEditorOption<EditorOption.scrollPredominantAxis, boolean>;
 		selectionClipboard: IEditorOption<EditorOption.selectionClipboard, boolean>;
 		selectionHighlight: IEditorOption<EditorOption.selectionHighlight, boolean>;
 		selectOnLineNumbers: IEditorOption<EditorOption.selectOnLineNumbers, boolean>;