如何使基于Chromium的浏览器上的Element.scrollIntoView()不依赖于平滑滚动标志? [英] How to make Element.scrollIntoView() on Chromium-based browsers not depend on smooth-scrolling flag?

问题描述

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

  dom_element.scrollIntoView({'行为':'平稳'，'block':'nearest'}); 

在Firefox上，它工作正常.

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

MDN和caniuse.com均显示Chrome支持 behaviour:smooth ，因此我很困惑.

经过一个令人沮丧的调试小时，我意识到，如果我专门转到 chrome://flags/#smooth-scrolling 并从中切换 Smooth Scrolling 默认设置为已启用.经过一些实验，我推断出平滑滚动"的 Default 值表示 Disabled .

奇怪的是:在另一台计算机(笔记本电脑)上，上述代码可以按预期工作，而无需调整平滑滚动.保留了默认设置，并且滚动很流畅.

两台PC均在Win 10 Pro上运行最新的Chrome v83.0.4103.61.

问题:

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

一个片段，演示了Chrome上的某些 PC的此问题:

  let dom_target = document.querySelector('#target');//使任何位置的点击都可以平滑滚动到目标(第14号)document.addEventListener('click'，function(){dom_target.scrollIntoView({'行为':'平稳'，'block':'nearest'});});  

  #container {溢出:滚动；边框:1px实线#333；}.物品 {边框:1px实线#333；高度:100px；背景颜色:红色；文本对齐:居中；白颜色;font-size:40px;行高:100px;}#目标 {背景颜色:蓝色；}  

</h1>< h1>在任何地方单击都会滚动到14.< 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>

解决方案

您不能. ¹

这由可访问性设置控制，您可以从"在Windows中显示动画"Windows中的设置"轻松访问>显示".

这是操作系统的一种可访问性功能，浏览器不会让您的网站覆盖它.

(还要注意，您提到的标志可能会得到删除，而仅允许此设置控制此行为，因此将来甚至可能无法解决).

但这应该不成问题，因为使用此设置的用户确实有充分的理由对其进行了设置.

^{1:当然，您可以手动进行此操作，但实际上您不应该违反用户的偏好.}

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:

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

解决方案

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

这篇关于如何使基于Chromium的浏览器上的Element.scrollIntoView()不依赖于平滑滚动标志?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！