1

在 BrowserStack 中进行测试后，我得出结论，自 81 版以来，使用scrollTo()with option 参数behavior: smooth在 Chrome 和 Edge 中不起作用。Edge 和 Chrome 的 80 版都按预期工作。根据MDN，它应该没有星号。（与 Safari 不同）

在诸如this one之类的流行答案中，建议使用 usingbehavior: smooth来在您的 Web 应用程序中启用平滑滚动。

这是一个小的可重复性：

<html>
<button onclick="goToAnchor('b')">Scroll to B</button>
<div id="a" style="height: 1000px; background-color: blue;">Blue</div>
<div id="b" style="height: 1000px; background-color: red;">Red</div>
<div id="c" style="height: 1000px; background-color: green;">Green</div>

</html>

<script>
  function goToAnchor(anchor) {
    let rect = document.getElementById(anchor).getBoundingClientRect();
    window.scrollTo({
      left: rect.left + window.pageXOffset,
      top: rect.top + window.pageYOffset,
      behavior: 'smooth',
    });
  }
</script>

预期的行为是浏览器窗口将视图平滑地插入到红色 div。它在我测试过的所有版本的 Firefox 中都能正确执行此操作。在自 v81 以来的所有 Chrome 版本以及自 v81 以来的所有 Edge 版本中，它似乎都使用了behavior: auto- 即它跳转到 div 而不是平滑地插入视图的行为。

在 Edge 和 Chrome 的 80 版本中，它的行为就像 Firefox，这意味着这个错误（？）一定是在 81 版本中引入的——也许是在共享的 Chromium 代码库中？

我发现我不太可能是第一个发现这个问题的人，因为它自 4 月以来一直没有工作，因此必须得出结论我做错了什么。有人可以指出代码中的错误吗？还是 Chrome 和 Edge API 真的坏了？行为是否隐藏在功能标志后面，就像在 Safari 中一样？

4

2 回答 2

1

我尝试使用MS Edge 版本 87.0.664.60和Google Chrome 版本 87.0.4280.88进行测试。

就我而言，代码在两种浏览器上都可以正常工作。

这是我的测试结果：（上面是MS Edge，下面是谷歌Chrome浏览器）

在此处输入图像描述

您正在使用BrowserStack进行此测试。该问题可能与BrowserStack相关。

我建议您尝试使用实际的浏览器进行测试。它可以帮助您找到问题的原因。

于 2020-12-15T03:09:42.390 回答
1

我相信我已经找到了罪魁祸首，有趣的是，Firefox 似乎是一个奇怪的问题。

在这个关于检测 RDP 连接的 StackOverflow 线程中，当前的最佳答案是：

您可以使用以下媒体查询：

@media screen and (prefers-reduced-motion: reduce) { . . . }

这prefers-reduced-motion部分很有趣。在我的测试中，这似乎也将scrollTo()调用更改scroll-behavior: 'smooth'为跳转而不是插值。

我对问题的代码示例做了一个附录来演示该功能：

<html>
  <button onclick="goToAnchor('b')">Scroll to B</button>
  <p class="reduced-motion">Reduced motion is enabled.</p>
  <div id="a" style="height: 1000px; background-color: blue;">Blue</div>
  <div id="b" style="height: 1000px; background-color: red;">Red</div>
  <div id="c" style="height: 1000px; background-color: green;">Green</div>
</html>
<style>
  .reduced-motion {
    display: none;
  }
  @media (prefers-reduced-motion) {
    .reduced-motion {
      display: inline;
    }
  }
</style>
<script>
  function goToAnchor(anchor) {
    let rect = document.getElementById(anchor).getBoundingClientRect();
    window.scrollTo({
      left: rect.left + window.pageXOffset,
      top: rect.top + window.pageYOffset,
      behavior: 'smooth',
    });
  }
</script>

它现在会说“启用了减少运动”。旁边的按钮取决于您的操作系统和浏览器配置。在这种情况下，scrollTo 调用将简单地跳转而不是插值。

简而言之，问题在于 BrowserStack 的远程桌面控制也启用了这个标志。

于 2020-12-16T10:03:23.083 回答