I have a JavaScript function that attempts to smoothly scroll an element into view:

dom_element.scrollIntoView({
    'behavior': 'smooth',
    'block': 'nearest'
});

On Firefox, this works perfectly fine.

But I realized that scrolling was instant, i.e. not respecting behaviour': 'smooth' on Chromium-based browsers (Chrome, Opera, Brave).

Both MDN and caniuse showed that Chrome supported behaviour: smooth, so I was quite puzzled.

After a frustrating hour of debugging, I realized that the code works if I specifically go to chrome://flags/#smooth-scrolling and toggle Smooth Scrolling from Default to Enabled. After some experimentation, I deduced that a value of Default for Smooth Scrolling meant Disabled.

The strange thing was: on another puter (laptop), the above code worked as expected without needing to tweak Smooth Scrolling. It was left as default, and scrolling was smooth.

Both PCs run the latest Chrome v83.0.4103.61 on Win 10 Pro.

Questions:

1. Why is the default setting for the Smooth Scrolling flag different for two puters? If hardware matters, one is a desktop i7-6700K with nVidia 1060GT, and the other is a laptop i7-8550U with GeForce MX110.
2. Since it's impractical to tell users to enable this flag before using the site, is it possible to override this flag programmatically in JS?

A snippet that demonstrates this problem for some PCs on Chrome:

let dom_target = document.querySelector('#target');

// Make clicks anywhere scroll smoothly to target (number 14)
document.addEventListener('click', function() {
    dom_target.scrollIntoView({
        'behavior': 'smooth',
        'block': 'nearest'
    });
});

#container {
  overflow: scroll;
  border: 1px solid #333;
}

.item {
  border: 1px solid #333;
  height: 100px;
  background-color: red;
  text-align: center;
  color: white;
  font-size: 40px;
  line-height: 100px;
}

#target {
  background-color: blue;
}

<h1>Clicking anywhere scrolls to 14, and the scrolling behavior should be smooth.</h1>
<section id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item" id="target">14</div>
  <div class="item">15</div>
  <div class="item">16</div> 
</section>

I have a JavaScript function that attempts to smoothly scroll an element into view:

dom_element.scrollIntoView({
    'behavior': 'smooth',
    'block': 'nearest'
});

On Firefox, this works perfectly fine.

But I realized that scrolling was instant, i.e. not respecting behaviour': 'smooth' on Chromium-based browsers (Chrome, Opera, Brave).

Both MDN and caniuse. showed that Chrome supported behaviour: smooth, so I was quite puzzled.

After a frustrating hour of debugging, I realized that the code works if I specifically go to chrome://flags/#smooth-scrolling and toggle Smooth Scrolling from Default to Enabled. After some experimentation, I deduced that a value of Default for Smooth Scrolling meant Disabled.

The strange thing was: on another puter (laptop), the above code worked as expected without needing to tweak Smooth Scrolling. It was left as default, and scrolling was smooth.

Both PCs run the latest Chrome v83.0.4103.61 on Win 10 Pro.

Questions:

1. Why is the default setting for the Smooth Scrolling flag different for two puters? If hardware matters, one is a desktop i7-6700K with nVidia 1060GT, and the other is a laptop i7-8550U with GeForce MX110.
2. Since it's impractical to tell users to enable this flag before using the site, is it possible to override this flag programmatically in JS?

A snippet that demonstrates this problem for some PCs on Chrome:

let dom_target = document.querySelector('#target');

// Make clicks anywhere scroll smoothly to target (number 14)
document.addEventListener('click', function() {
    dom_target.scrollIntoView({
        'behavior': 'smooth',
        'block': 'nearest'
    });
});

#container {
  overflow: scroll;
  border: 1px solid #333;
}

.item {
  border: 1px solid #333;
  height: 100px;
  background-color: red;
  text-align: center;
  color: white;
  font-size: 40px;
  line-height: 100px;
}

#target {
  background-color: blue;
}

<h1>Clicking anywhere scrolls to 14, and the scrolling behavior should be smooth.</h1>
<section id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item" id="target">14</div>
  <div class="item">15</div>
  <div class="item">16</div> 
</section>

• javascript
• chromium
• smooth-scrolling

• Can you provide a minimal reproducible example where you'd face that issue? Hard to investigate without it. For instance, doesthis minimal setup reproduces the issue? What about this one? – Kaiido Commented Jun 3, 2020 at 7:32
• I have added a snippet that triggers the problem on this puter's Chromium browsers. It works fine on Firefox. – light Commented Jun 3, 2020 at 16:03
• ... Works in my Win10 VM (macOs does't even have that flag) – Kaiido Commented Jun 4, 2020 at 9:13
• The code works fine. I tested on Chrome v83.0.4103.97 and Opera v68.0.3618.125 on Win10 Pro. Even Smooth Scrolling is set to default. Have you tried it on a fresh install (either windows or chrome) – Kalimah Commented Jun 13, 2020 at 12:40
• I've not tried a fresh Windows install. I'd want to avoid doing that as much as possible. On this problematic machine, I have tried other Chromium-based browsers, though (Opera, Brave), and they behave the same as Chrome. This leads me to think it could be a Chromium or Windows setting. – light Commented Jun 15, 2020 at 17:51

2 Answers 2

You can't.¹

This is controlled by an accessibility setting that you can trigger from the "Show animations in Windows" setting in Windows "Settings > Ease of Access > Display".

This being an accessibility feature from the OS, the browser won't let your website override it.

(Also note that the flag you mentioned might get removed in favor of letting only this setting control this behavior, so it may not even be a possible workaround in the future).

But that shouldn't be a problem, since users with this setting certainly did set it for a good reason.

^{1: Of course you can make this manually, but really you shouldn't go against user's preferences.}

I have tried this approach in my project and it is working, I hope you find this helpful.

What you have to do is just remove the 'behavior': 'smooth', from your file. So your code should look like below:

let dom_target = document.querySelector('#target');

// Make clicks anywhere scroll smoothly to target (number 14)
document.addEventListener('click', function() {
dom_target.scrollIntoView({
    'block': 'nearest'
 });
});

And you just add the style scroll-behavior: smooth to your element with id target.

So your HTML file should be somewhat like this:

<h1>Clicking anywhere scrolls to 14, and the scrolling behavior should be smooth.</h1>
<section id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item" id="target" style="scroll-behavior:'smooth'">14</div>
<div class="item">15</div>
<div class="item">16</div> 
</section>

Please try this once and I hope you can resolve your problem.