如何使基于铬的浏览器上的Element.scrollIntoView()不依赖于平滑的滚动标志？

Question

我有一个JavaScript函数，它试图平滑地滚动元素到视图中：

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

在Firefox上，这个功能非常好。

但是我意识到滚动是即时的，也就是说在基于Chrome的浏览器上不尊重behaviour': 'smooth' (Chrome，Opera，Brave)。

MDN和caniuse.com都显示Chrome支持behaviour: smooth，所以我感到很困惑。

在经历了令人沮丧的一小时调试之后，我意识到如果我特别地转到chrome://flags/#smooth-scrolling并将平滑的滚动从默认切换到启用，代码就能工作。经过一些实验，我推断出平滑滚动的默认值意味着禁用。

奇怪的是:在另一台计算机(膝上型电脑)上，上述代码按预期工作，不需要调整平滑滚动。它是默认的，滚动是平滑的。

这两台电脑都在Win 10 Pro上运行最新的Chrome v83.0.4103.61。

问题：

1. 为什么两台计算机平滑滚动标志的默认设置不同？如果硬件很重要，一个是带有nVidia 1060GT的桌面i7-6700K，另一个是带有GeForce MX110的笔记本电脑i7-8550U。
2. 由于在使用站点之前告诉用户启用此标志是不实际的，所以是否可以在JS中以编程方式覆盖此标志？

在Chrome上为某些PC演示了这个问题的一个片段：

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>

​

Answer 1

我已经在我的项目中尝试过这个方法，并且它是有效的，我希望你能发现这是有帮助的。

您所要做的就是从您的文件中删除‘行为’：‘平滑’，。所以您的代码应该如下所示：

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

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

您只需添加样式滚动行为:光滑到您的元素与id 目标。

所以HTML文件应该是这样的：

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

请试一次，我希望你能解决你的问题。