Emit wheel event when there is no scrolling in the webview.

src/vs/workbench/contrib/webview/browser/baseWebviewElement.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { addClass } from 'vs/base/browser/dom';
+import { IMouseWheelEvent } from 'vs/base/browser/mouseEvent';
 import { Emitter } from 'vs/base/common/event';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { IEnvironmentService } from 'vs/platform/environment/common/environment';
@@ -25,6 +26,7 @@ export const enum WebviewMessageChannels {
 	loadResource = 'load-resource',
 	loadLocalhost = 'load-localhost',
 	webviewReady = 'webview-ready',
+	wheel = 'did-scroll-wheel'
 }
 
 interface IKeydownEvent {
@@ -117,6 +119,10 @@ export abstract class BaseWebview<T extends HTMLElement> extends Disposable {
 			this.handleFocusChange(true);
 		}));
 
+		this._register(this.on(WebviewMessageChannels.wheel, (event: IMouseWheelEvent) => {
+			this._onDidWheel.fire(event);
+		}));
+
 		this._register(this.on(WebviewMessageChannels.didBlur, () => {
 			this.handleFocusChange(false);
 		}));
@@ -153,6 +159,9 @@ export abstract class BaseWebview<T extends HTMLElement> extends Disposable {
 	private readonly _onDidScroll = this._register(new Emitter<{ readonly scrollYPercentage: number; }>());
 	public readonly onDidScroll = this._onDidScroll.event;
 
+	private readonly _onDidWheel = this._register(new Emitter<IMouseWheelEvent>());
+	public readonly onDidWheel = this._onDidWheel.event;
+
 	private readonly _onDidUpdateState = this._register(new Emitter<string | undefined>());
 	public readonly onDidUpdateState = this._onDidUpdateState.event;
 

src/vs/workbench/contrib/webview/browser/dynamicWebviewEditorOverlay.ts

@@ -3,6 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { IMouseWheelEvent } from 'vs/base/browser/mouseEvent';
 import { memoize } from 'vs/base/common/decorators';
 import { Emitter, Event } from 'vs/base/common/event';
 import { Disposable, DisposableStore, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
@@ -15,6 +16,8 @@ import { Dimension } from 'vs/base/browser/dom';
  * Webview editor overlay that creates and destroys the underlying webview as needed.
  */
 export class DynamicWebviewEditorOverlay extends Disposable implements WebviewEditorOverlay {
+	private readonly _onDidWheel = this._register(new Emitter<IMouseWheelEvent>());
+	public readonly onDidWheel = this._onDidWheel.event;
 
 	private readonly _pendingMessages = new Set<any>();
 	private readonly _webview = this._register(new MutableDisposable<WebviewElement>());

src/vs/workbench/contrib/webview/browser/pre/main.js

@@ -267,6 +267,22 @@
 		};
 
 		let isHandlingScroll = false;
+
+		const handleWheel = (event) => {
+			if (isHandlingScroll) {
+				return;
+			}
+
+			host.postMessage('did-scroll-wheel', {
+				deltaMode: event.deltaMode,
+				deltaX: event.deltaX,
+				deltaY: event.deltaY,
+				deltaZ: event.deltaZ,
+				detail: event.detail,
+				type: event.type
+			});
+		};
+
 		const handleInnerScroll = (event) => {
 			if (!event.target || !event.target.body) {
 				return;
@@ -308,6 +324,7 @@
 			// apply default script
 			if (options.allowScripts) {
 				const defaultScript = newDocument.createElement('script');
+				defaultScript.id = '_vscodeApiScript';
 				defaultScript.textContent = getVsCodeApiScript(data.state);
 				newDocument.head.prepend(defaultScript);
 			}
@@ -475,6 +492,7 @@
 						}
 
 						contentWindow.addEventListener('scroll', handleInnerScroll);
+						contentWindow.addEventListener('wheel', handleWheel);
 
 						pendingMessages.forEach((data) => {
 							contentWindow.postMessage(data, '*');

src/vs/workbench/contrib/webview/browser/webview.ts

@@ -12,6 +12,7 @@ import * as nls from 'vs/nls';
 import { RawContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { ExtensionIdentifier } from 'vs/platform/extensions/common/extensions';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
+import { IMouseWheelEvent } from 'vs/base/browser/mouseEvent';
 
 /**
  * Set when the find widget in a webview is visible.
@@ -80,6 +81,7 @@ export interface Webview extends IDisposable {
 	readonly onDidFocus: Event<void>;
 	readonly onDidClickLink: Event<string>;
 	readonly onDidScroll: Event<{ scrollYPercentage: number }>;
+	readonly onDidWheel: Event<IMouseWheelEvent>;
 	readonly onDidUpdateState: Event<string | undefined>;
 	readonly onMessage: Event<any>;
 	readonly onMissingCsp: Event<ExtensionIdentifier>;