Support scrolling a domNode in an OverlayWidget with Mouse Wheel

[ricenoddle]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

var jsCode = [
	'"use strict";',
	'function Person(age) {',
	'	if (age) {',
	'		this.age = age;',
	'	}',
	'}',
	'Person.prototype.getAge = function () {',
	'	return this.age;',
	'};',
    '',
    ''
].join('\n');

var editor = monaco.editor.create(document.getElementById('container'), {
	value: jsCode,
	language: 'javascript',
	glyphMargin: true,
});

var decorations = editor.deltaDecorations(
	[],
	[
		{
			range: new monaco.Range(3, 1, 3, 1),
			options: {
				isWholeLine: true,
				className: 'myContentClass',
				glyphMarginClassName: 'myGlyphMarginClass'
			}
		}
	]
);

let layoutInfo = editor.getLayoutInfo();

var myDomNode = document.createElement('div');
myDomNode.innerHTML = '<p>comment</p> <p>comment</p> <p>comment</p> <p>comment</p> <p>comment</p> <p>comment</p><p>comment</p><p>comment</p>';
myDomNode.style.background = 'grey';
myDomNode.style.width = `${layoutInfo.width - layoutInfo.minimap.minimapWidth - 15}px`;
myDomNode.style.overflow = 'auto'

let height = 0;
let top = 0;

// Add a zone to make hit testing more interesting
var viewZoneId = null;
editor.changeViewZones(function (changeAccessor) {
	var domNode = document.createElement('div');
	domNode.style.background = 'lightgreen';
	viewZoneId = changeAccessor.addZone({
		afterLineNumber: 3,
		heightInLines: 10,
		domNode: domNode,
        onDomNodeTop: (top1) => {
            top = top1;
            layoutOverlayWidget()
        },
        onComputedHeight: (height1) => {
            height = height1;
            layoutOverlayWidget();
        },
	});
});

function layoutOverlayWidget() {
    myDomNode.style.height = `${height}px`;
    myDomNode.style.top = `${top}px`
}

// Add an overlay widget
var overlayWidget = {
	getId: function () {
		return 'my.overlay.widget';
	},
	getDomNode: function () {
		return myDomNode;
	},
	getPosition: function () {
		return null;
	}
};
editor.addOverlayWidget(overlayWidget);

Actual Behavior

The scroll bar is supposed to be scrollable, but here I cannot scroll it.

Expected Behavior

I can scroll the domNode as normal. And when I scroll to the bottom or the top of the domNode, I could also scroll my editor.

Additional Context

No response

[hediet]

I can scroll:

Do you mean scrolling by the mouse wheel?

[ricenoddle]

I can scroll:

Do you mean scrolling by the mouse wheel?

Sorry for not describing clearly. Yes, cannot scroll by the mouse wheel. I tried to use stopPropagation and it works. But it will cause another question that when I reach the bottom or the top of the domNode, I can't scroll the editor by mouse wheel.

[LokiMidgard]

You could check if you are at the ends of the scrollpane:

            textHolder.onwheel = (e) => {
                // only stop propagation if the overlay is scrollable
                // and is not at the end of the scroll

                const scrollHeight = textHolder.scrollHeight;
                const clientHeight = textHolder.getBoundingClientRect().height;
                if (scrollHeight > textHolder.clientHeight) {
                    const scrollUp = e.deltaY < 0;
                    const scrollDown = e.deltaY > 0;
                    const atTop = textHolder.scrollTop == 0;
                    const atBottom = Math.round(textHolder.scrollTop + clientHeight) >= scrollHeight;
                    if (scrollUp && atTop) {
                        // do not stop propagation
                    } else if (scrollDown && atBottom) {
                        // do not stop propagation
                    } else {
                        e.stopPropagation();
                    }
                }
            }

[LokiMidgard]

I thought the errors in VSCode were scrolable but I wasn't yet able to get a big enough error text that would let me scroll the text vertically. However Horizontaly is working. I also noticed that you get the resize cursor on the lower edge (screenshot dose not record cursor) but at least for me it did nothing…

While not a direct answer to this problem, beeing able to increase the box could help mitigate the Problem.