How can I slow down the scroll speed in Microsoft Edge using JavaScript? [closed]

Question

In Microsoft Edge, holding the arrow down key on any web page scrolls the page down at an incredibly fast speed. Although Edge is Chromium-based, Google Chrome is not affected by this.

Here is an example using 250 paragraphs of Lorem Ipsum.

In Chrome, this scrolls down by a couple paragraphs per second. In Edge, this scrolls down dozens of paragraphs per second.

The arrow up/down keys make for a horrible user experience on our website in Edge.

How can we control the scroll rate of our website in Edge using JavaScript?

Edge:

Chrome:

Oh, never knew that Edge scrolls so fast. You always have the way to scroll one screen per click on space.😊 — deEr.
– deEr., Commented May 17, 2024 at 15:18
I see lots of people complaining about it (but this is the internet, it could happen to 0.0000001% and you'd see lots of complaints about it). This article talks about a user setting that's likely related. I doubt there's anything reasonable you can do about it in your site's code. You could... — T.J. Crowder
– T.J. Crowder, Commented May 17, 2024 at 15:32
...try detecting Edge and artificially delaying it with a scroll event handler, but that would negatively impact people who'd changed the setting. I think you're better off just leaving people to configure their browsers as works for them, FWIW. If it's all websites, it's really not your problem. — T.J. Crowder
– T.J. Crowder, Commented May 17, 2024 at 15:32
Is this not a function of the user's selected (or default) keyboard repeat rate in the operating system, and/or the user's (or default) selected scroll rate/distance? If so, those aren't things that a web page should be overriding, as it's either a user or OS choice. Given that you say it's in Edge only, then it sounds like it's a browser-level setting, perhaps a scroll distance selection, which, again, isn't something to change on a per-website basis, as it's against user expectations for how the UI works in that browser, and/or might directly override a user choice. — Makyen
– Makyen ♦, Commented May 18, 2024 at 18:19
Some feedback: The way you've stated this, it basically looks like a question about the browser/ OS settings which would be off-topic, try to restate your question and focus it along the JavaScript part, something basically like: "How do I control (decrease) the scroll speed on my site using JavaScript" — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented May 18, 2024 at 18:19

Peter Mortensen · Accepted Answer · 2025-05-28 21:15:12Z

According to Microsoft they have changed Edge to scroll by a % of the scrollbar, rather than by a fixed pixel amount like Chrome does:

Chromium browsers use a fixed scroll delta value (100px per mousewheel tick, 40px per scrollbar button click or keyboard arrow press). We are changing this behavior to match previous versions of Microsoft Edge, which use scroller height to compute scroll deltas. Percent based scrolling is a great functional addition making it much easier to navigate smaller scrollers.

On long pages, this makes the page scroll incredibly fast.

This problem appears to be OS version-specific (see the comments).

I have tested the following solution and it can be used, regardless of what Windows Scrolling Personality is set to in edge:///flags (enabled or disabled).

if(window.navigator.userAgent.indexOf('Edg') > -1) { document.onkeydown = slowScroll; window.lastScrolledUp = 0; window.lastScrolledDown = 0; window.lastScrolledLeft = 0; window.lastScrolledRight = 0; } function slowScroll(e) { // Don't capture key presses when inside form fields if(['datalist', 'input', 'optgroup', 'option', 'select', 'textarea'].indexOf(e.target.nodeName.toLowerCase()) >= 0) { return; } // Limit in milliseconds - may be scrolled once per this limit var minDelay = 50; var now = Date.now(); switch(e.key) { case 'ArrowUp': if(now - window.lastScrolledUp < minDelay) { e.preventDefault(); return; } window.lastScrolledUp = now; break; case 'ArrowDown': if(now - window.lastScrolledDown < minDelay) { e.preventDefault(); return; } window.lastScrolledDown = now; break; case 'ArrowLeft': if(now - window.lastScrolledLeft < minDelay) { e.preventDefault(); return; } window.lastScrolledLeft = now; break; case 'ArrowRight': if(now - window.lastScrolledRight < minDelay) { e.preventDefault(); return; } window.lastScrolledRight = now; break; } }

The above code successfully slows down the ludicrously fast scroll rate in Edge. The code ensures that the page cannot be scrolled more than once every 50 ms in any direction; the timing is controlled by minDelay.

To take it one step further and apply this limit to all browsers, simply remove the first line of code (and its closing brace). This is what we've ended up doing to keep the user experience consistent across browsers.

This code plays nicely with all of the browsers that I've tested it on: Edge, Chrome & Opera (which are all Chromium-based) + Firefox. It simply introduces a limit to how fast the page can be scrolled using the arrow keys.

Scrolling using Page Down + Page Up remain unaffected and can still be used (pressed or held) to scroll the page at a fast speed.

Is there a way that doesn’t use this sort of trickery?

Collectives™ on Stack Overflow

How can I slow down the scroll speed in Microsoft Edge using JavaScript? [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related