Fix #62003, add option for predominant axis scrolling

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

@@ -282,6 +282,7 @@ export abstract class AbstractScrollableElement extends Widget {
 		this._options.handleMouseWheel = massagedOptions.handleMouseWheel;
 		this._options.mouseWheelScrollSensitivity = massagedOptions.mouseWheelScrollSensitivity;
 		this._options.fastScrollSensitivity = massagedOptions.fastScrollSensitivity;
+		this._options.scrollPredominantAxisOnly = massagedOptions.scrollPredominantAxisOnly;
 		this._setListeningToMouseWheel(this._options.handleMouseWheel);
 
 		if (!this._options.lazyRender) {
@@ -329,6 +330,14 @@ export abstract class AbstractScrollableElement extends Widget {
 			let deltaY = e.deltaY * this._options.mouseWheelScrollSensitivity;
 			let deltaX = e.deltaX * this._options.mouseWheelScrollSensitivity;
 
+			if (this._options.scrollPredominantAxisOnly) {
+				if (Math.abs(deltaY) >= Math.abs(deltaX)) {
+					deltaX = 0;
+				} else {
+					deltaY = 0;
+				}
+			}
+
 			if (this._options.flipAxes) {
 				[deltaY, deltaX] = [deltaX, deltaY];
 			}
@@ -548,6 +557,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),
+		scrollPredominantAxisOnly: (typeof opts.scrollPredominantAxisOnly !== 'undefined' ? opts.scrollPredominantAxisOnly : 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 editor 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.
+	 */
+	scrollPredominantAxisOnly?: 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;
+	scrollPredominantAxisOnly: boolean;
 }
 
 export interface ScrollableElementResolvedOptions {
@@ -125,6 +133,7 @@ export interface ScrollableElementResolvedOptions {
 	alwaysConsumeMouseWheel: boolean;
 	mouseWheelScrollSensitivity: number;
 	fastScrollSensitivity: number;
+	scrollPredominantAxisOnly: boolean;
 	mouseWheelSmoothScroll: boolean;
 	arrowSize: number;
 	listenOnDomNode: HTMLElement | null;

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

@@ -49,6 +49,7 @@ export class EditorScrollbar extends ViewPart {
 			arrowSize: configScrollbarOpts.arrowSize,
 			mouseWheelScrollSensitivity: configScrollbarOpts.mouseWheelScrollSensitivity,
 			fastScrollSensitivity: configScrollbarOpts.fastScrollSensitivity,
+			scrollPredominantAxisOnly: configScrollbarOpts.scrollPredominantAxisOnly,
 		};
 
 		this.scrollbar = this._register(new SmoothScrollableElement(linesContent.domNode, scrollbarOptions, this._context.viewLayout.scrollable));
@@ -129,7 +130,8 @@ export class EditorScrollbar extends ViewPart {
 			const newOpts: ScrollableElementChangeOptions = {
 				handleMouseWheel: editor.viewInfo.scrollbar.handleMouseWheel,
 				mouseWheelScrollSensitivity: editor.viewInfo.scrollbar.mouseWheelScrollSensitivity,
-				fastScrollSensitivity: editor.viewInfo.scrollbar.fastScrollSensitivity
+				fastScrollSensitivity: editor.viewInfo.scrollbar.fastScrollSensitivity,
+				scrollPredominantAxisOnly: editor.viewInfo.scrollbar.scrollPredominantAxisOnly
 			};
 			this.scrollbar.updateOptions(newOpts);
 		}

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

@@ -459,6 +459,11 @@ const editorConfiguration: IConfigurationNode = {
 			'default': EDITOR_DEFAULTS.viewInfo.scrollbar.fastScrollSensitivity,
 			'markdownDescription': nls.localize('fastScrollSensitivity', "Scrolling speed mulitiplier when pressing `Alt`.")
 		},
+		'editor.scrollPredominantAxisOnly': {
+			'type': 'boolean',
+			'default': EDITOR_DEFAULTS.viewInfo.scrollbar.scrollPredominantAxisOnly,
+			'description': nls.localize('scrollPredominantAxisOnly', "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.")
+		},
 		'editor.multiCursorModifier': {
 			'type': 'string',
 			'enum': ['ctrlCmd', 'alt'],

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

@@ -485,6 +485,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.
+	 */
+	scrollPredominantAxisOnly?: boolean;
 	/**
 	 * The modifier to be used to add multiple cursors with the mouse.
 	 * Defaults to 'alt'
@@ -898,6 +903,7 @@ export interface InternalEditorScrollbarOptions {
 	readonly verticalSliderSize: number;
 	readonly mouseWheelScrollSensitivity: number;
 	readonly fastScrollSensitivity: number;
+	readonly scrollPredominantAxisOnly: boolean;
 }
 
 export interface InternalEditorMinimapOptions {
@@ -1321,6 +1327,7 @@ export class InternalEditorOptions {
 			&& a.verticalSliderSize === b.verticalSliderSize
 			&& a.mouseWheelScrollSensitivity === b.mouseWheelScrollSensitivity
 			&& a.fastScrollSensitivity === b.fastScrollSensitivity
+			&& a.scrollPredominantAxisOnly === b.scrollPredominantAxisOnly
 		);
 	}
 
@@ -1826,7 +1833,7 @@ export class EditorOptionsValidator {
 		};
 	}
 
-	private static _sanitizeScrollbarOpts(opts: IEditorScrollbarOptions | undefined, defaults: InternalEditorScrollbarOptions, mouseWheelScrollSensitivity: number, fastScrollSensitivity: number): InternalEditorScrollbarOptions {
+	private static _sanitizeScrollbarOpts(opts: IEditorScrollbarOptions | undefined, defaults: InternalEditorScrollbarOptions, mouseWheelScrollSensitivity: number, fastScrollSensitivity: number, scrollPredominantAxisOnly: boolean): InternalEditorScrollbarOptions {
 		if (typeof opts !== 'object') {
 			return defaults;
 		}
@@ -1851,6 +1858,7 @@ export class EditorOptionsValidator {
 			handleMouseWheel: _boolean(opts.handleMouseWheel, defaults.handleMouseWheel),
 			mouseWheelScrollSensitivity: mouseWheelScrollSensitivity,
 			fastScrollSensitivity: fastScrollSensitivity,
+			scrollPredominantAxisOnly: scrollPredominantAxisOnly,
 		};
 	}
 
@@ -2006,7 +2014,8 @@ export class EditorOptionsValidator {
 		if (fastScrollSensitivity <= 0) {
 			fastScrollSensitivity = defaults.scrollbar.fastScrollSensitivity;
 		}
-		const scrollbar = this._sanitizeScrollbarOpts(opts.scrollbar, defaults.scrollbar, mouseWheelScrollSensitivity, fastScrollSensitivity);
+		let scrollPredominantAxisOnly = _boolean(opts.scrollPredominantAxisOnly, defaults.scrollbar.scrollPredominantAxisOnly);
+		const scrollbar = this._sanitizeScrollbarOpts(opts.scrollbar, defaults.scrollbar, mouseWheelScrollSensitivity, fastScrollSensitivity, scrollPredominantAxisOnly);
 		const minimap = this._sanitizeMinimapOpts(opts.minimap, defaults.minimap);
 
 		return {
@@ -2636,6 +2645,7 @@ export const EDITOR_DEFAULTS: IValidatedEditorOptions = {
 			handleMouseWheel: true,
 			mouseWheelScrollSensitivity: 1,
 			fastScrollSensitivity: 5,
+			scrollPredominantAxisOnly: true,
 		},
 		minimap: {
 			enabled: true,

src/vs/monaco.d.ts

@@ -2816,6 +2816,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.
+		 */
+		scrollPredominantAxisOnly?: boolean;
 		/**
 		 * The modifier to be used to add multiple cursors with the mouse.
 		 * Defaults to 'alt'
@@ -3174,6 +3179,7 @@ declare namespace monaco.editor {
 		readonly verticalSliderSize: number;
 		readonly mouseWheelScrollSensitivity: number;
 		readonly fastScrollSensitivity: number;
+		readonly scrollPredominantAxisOnly: boolean;
 	}
 
 	export interface InternalEditorMinimapOptions {