[Feature Request] Align `alwaysConsumeMouseWheel` Behavior with Native textarea Scrolling

[RomainGuarinoni]

Context

• [X] This issue is not a bug report. (please use a different template for reporting a bug)
• [X] This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

Scrolling behaviour for textarea input

When working with a scrollable page that contains a textarea with its own scrollable content, the following behavior is observed:

• Scrolling within the textarea without moving the mouse will not affect the page scroll, even if the end of the textarea scroll is reached.
• Moving the mouse while scrolling causes the entire page to scroll.

You can observe this behavior in the video below (LINK TO THE CODEPEN):

https://github.com/user-attachments/assets/786fbe22-8960-4cd9-9d4e-37144a675d61

Expected Behavior in Monaco Editor:

When setting the alwaysConsumeMouseWheel option to false in the Monaco Editor, the expected behavior I expect is that it should match the normal behavior described above for textarea.

Actual Behavior in Monaco Editor:

When scrolling in the Monaco Editor without moving the mouse, the page behind scrolls directly once the end of the editor scroll is reached.

You can see this behavior in the video below:

https://github.com/user-attachments/assets/50479f89-6c92-4db3-9d31-5c553f7dba92

My question

Is it possible to have the same scrolling behaviour than the textarea today with a set of option I am not aware of? if not, could it be possible to add it to the Monaco editor ?

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.50.0#XQAAAAL-AwAAAAAAAABBqQkHQ5NjdZrO1v_fvV5-BnnezDO7YS3UcGq57lQnhKxqsy5c3YqLB-n-W6HZKGZOpWve8UwxIYLZGn5ULwYU5_hpW_SqkmFNjbH8GsA66olw9J6F7x3fcGKZhIwhSo5KCe6a1HIVFxklA81OP2L472oV2c8r1UEOejHlkTmHS60wOGzGbq262IJdVJMEAVJTcs_Fwafb0fkWCEnaVVPNWO0PenNfTLzD5N253KnsN7oTHPf5Lik30TeP4JXQGB84JFRM-gldiIPUwWPDPPIl11J_hBdPfG8xXmJmBTK_f5mkA8fLubzPMCEPYMdNRjJHSrHtdF63NeBp_JFUqium-4VAmtsJqviYm_e06XiOxVpViROgOLPTb1C9JDyyC4usv6phdwPLM9quqPRKndgGIjXlAPrf4DyR1qkS8WJZUU8El1oiGu3zAmkTgdpXim6ppg03HzPAYyb1rHW1xb-YvsaoDK5vZq-OcZT6O7UPfZAVaMSVEX6G75MIsN5SoUbveSzcSfYufFjHrJYL_Nboy1Z-DLcTv8GVQxzBIuM_2ai3Romogy3Q-uq7ki6T2Zr841vmF6X7zUFu5IlxRhCsWiUVbiVCsgebTEAq1imxV06pGD0wERUCwoBqkccfsgESWpw-eMjFFPycXZQirwn-QMki5QTYU1nCaxDzm8yYydean70c0T-b_fSEUr_cgyY_gY_X_0RORgA

Monaco Editor Playground Code

Javascript

const value = /* set from `myEditor.getModel()`: */ `function hello() {
	alert('Hello world!');
}
function hello() {
	alert('Hello world!');
}
function hello() {
	alert('Hello world!');
}`;

/**
 * The idea here is that with `alwaysConsumeMouseWheel` set to false, I would like to be able
 * to scroll the page when hovering 
 */
const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "javascript",
	automaticLayout: true,
	scrollbar:{
		alwaysConsumeMouseWheel:false
	}
});

HTML

<div class="page">
        <div class="big-content">
            Big content
        </div>
    <div id="container"></div>
    <div class="big-content">
            Big content
        </div>
</div>

Css

.page{
    width:100%;
    height:100%;
    background:red;
    overflow:scroll;
    position:relative;
}

.big-content{
    height:900px;
    background: red;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;

}

#container{
    height:200px;
}