Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Align alwaysConsumeMouseWheel Behavior with Native textarea Scrolling #4599

Open
2 tasks done
RomainGuarinoni opened this issue Jul 12, 2024 · 0 comments
Open
2 tasks done
Labels
feature-request Request for new features or functionality

Comments

@RomainGuarinoni
Copy link

RomainGuarinoni commented Jul 12, 2024

Context

  • This issue is not a bug report. (please use a different template for reporting a bug)
  • 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):

Screen.Recording.2024-07-12.at.10.53.29.mov

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:

Screen.Recording.2024-07-12.at.10.53.53.mov

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;
}
@RomainGuarinoni RomainGuarinoni added the feature-request Request for new features or functionality label Jul 12, 2024
@RomainGuarinoni RomainGuarinoni changed the title [Feature Request] alwaysConsumeMouseWheel should mimic what nativetextarea does [Feature Request] Align alwaysConsumeMouseWheel Behavior with Native textarea Scrolling Jul 12, 2024
@RomainGuarinoni RomainGuarinoni changed the title [Feature Request] Align alwaysConsumeMouseWheel Behavior with Native textarea Scrolling [Feature Request] AlignalwaysConsumeMouseWheel Behavior with Native textarea Scrolling Jul 12, 2024
@RomainGuarinoni RomainGuarinoni changed the title [Feature Request] AlignalwaysConsumeMouseWheel Behavior with Native textarea Scrolling [Feature Request] Align alwaysConsumeMouseWheel Behavior with Native textarea Scrolling Jul 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature-request Request for new features or functionality
Projects
None yet
Development

No branches or pull requests

1 participant