window.scrollTo with options not working on Microsoft Edge

Question

I have a strange issue which I can only replicate on Microsoft browsers (Edge and IE11 tested).

<style>
    body {
        height: 5000px;
        width: 5000px;
    }
</style>
<p>Click the button to scroll the document window to 1000 pixels.</p>
<button onclick="scrollWin()">Click me to scroll!</button>
<script>
    function scrollWin() {
        window.scrollTo({
            left: 1000, 
            top: 1000,
            behavior:"smooth"
        });
    }
</script>

This code correctly scrolls the window 1000px to the left and down, with a smooth behaviour in Chrome and Firefox. However, on Edge and IE, it does not move at all.

Answer 1

As mentioned before, the Scroll Behavior specification has only been implemented in Chrome, Firefox and Opera.

Here's a one-liner to detect support for the behavior property in ScrollOptions:

const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;

And here's a simple implementation for cross-browser smooth scrolling: https://gist.github.com/eyecatchup/d210786daa23fd57db59634dd231f341