How to make Element.scrollIntoView() on Chromium-based browsers not depend on smooth-scrolling flag?

问题

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.com 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 computer (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:

Why is the default setting for the Smooth Scrolling flag different for two computers? If hardware matters, one is a desktop i7-6700K with nVidia 1060GT, and the other is a laptop i7-8550U with GeForce MX110.
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>

回答1:

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.}

回答2:

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.

来源：https://stackoverflow.com/questions/62150827/how-to-make-element-scrollintoview-on-chromium-based-browsers-not-depend-on-sm

标签

javascript

chromium

smooth-scrolling