Ema*_*ren 3 html javascript google-chrome microsoft-edge browser-api
在 BrowserStack 中进行测试后，我得出的结论是，自版本 81 以来，使用scrollTo()选项参数behavior: smooth在 Chrome 和 Edge 中不起作用。Edge 和 Chrome 的版本 80 都按预期工作。根据MDN 的说法，它应该可以在没有星号的情况下工作。（与 Safari 不同）
在诸如此之类的流行答案中，behavior: 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 代码库中？
我发现我不太可能是第一个发现这个问题的人，因为它自四月份以来就没有工作，因此必须得出结论我做错了什么。有人可以指出代码中的错误吗？或者 Chrome 和 Edge API 真的坏了吗？该行为是否隐藏在功能标志后面，就像在 Safari 中一样？
我相信我已经找到了罪魁祸首，有趣的是，似乎 Firefox 才是最奇怪的。
在这个有关检测 RDP 连接的 StackOverflow 线程中，当前的最佳答案是：
您可以使用以下媒体查询：
Run Code Online (Sandbox Code Playgroud)@media screen and (prefers-reduced-motion: reduce) { . . . }
这prefers-reduced-motion部分很有趣。在我的测试中，这似乎也改变了scrollTo()跳转scroll-behavior: 'smooth'而不是插值的调用。
我对问题的代码示例做了一个附录来演示该功能：
@media screen and (prefers-reduced-motion: reduce) { . . . }
现在它会显示“已启用减少运动”。按钮旁边，具体取决于您的操作系统和浏览器配置。在这种情况下，scrollTo 调用将只是跳转而不是插值。
简而言之，问题在于 BrowserStack 的远程桌面控制也启用了此标志。