javascript window.scroll 平滑不适用于 Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51731754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.scroll smooth not working on Safari
提问by moondaisy
I'm using this to get a smooth scroll to a particular section when a user clicks on a button:
当用户单击按钮时，我正在使用它来平滑滚动到特定部分：
window.scroll({
top: $(this).data('y'),
left: 0,
behavior: 'smooth'
});
This works great everywhere (including Android phones) but on Safari (desktop and iphone). In those cases it scrolls to the correct position but it isn't smooth, it's like it jumps.
这适用于任何地方（包括 Android 手机），但适用于 Safari（桌面和 iPhone）。在这些情况下，它会滚动到正确的位置，但并不流畅，就像跳跃一样。
I made a small demo on Codepen available here. Just click on the nav menu options and it will scroll there. This will be smooth on Chrome but not on Safari.
我在这里做了一个关于 Codepen 的小演示。只需单击导航菜单选项，它就会在那里滚动。这在 Chrome 上会很流畅，但在 Safari 上不会。
Is this not supported? (it doesn't seem to be the case looking at the doc) What are the supported options?
这不支持吗？（查看文档似乎并非如此）支持的选项是什么？
Thanks!
谢谢！
回答by tyriker
window.scrollis supported, but scroll-behaviorCSS is not.
window.scroll支持，但scroll-behavior不支持CSS。
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
Pending support, consider using the smoothscroll-polyfillwhich adds smooth scrolling support for Safari, IE, and Edge.
待支持，请考虑使用smoothscroll-polyfill，它为 Safari、IE 和 Edge 添加了平滑滚动支持。
回答by ddlab
I recently wrote down my ideas into a function, which is kind of polyfill for lacking smooth scroll feature support in IOS browsers and desktop Safari as well. Some may call it a bloody workaround, but hey, it's working. It doesn't require jQuery, it's pure javascript.
我最近将我的想法写成一个函数，这是一种 polyfill，用于在 IOS 浏览器和桌面 Safari 中缺乏平滑滚动功能支持。有些人可能会称其为该死的解决方法，但是，嘿，它确实有效。它不需要 jQuery，它是纯 javascript。
var fnc_scrollto = function(to,id){
var smoothScrollFeature = 'scrollBehavior' in document.documentElement.style;
var articles = document.querySelectorAll("ul#content > li"), i;
if (to == 'elem') to = articles[id].offsetTop;
var i = parseInt(window.pageYOffset);
if ( i != to ) {
if (!smoothScrollFeature) {
to = parseInt(to);
if (i < to) {
var int = setInterval(function() {
if (i > (to-20)) i += 1;
else if (i > (to-40)) i += 3;
else if (i > (to-80)) i += 8;
else if (i > (to-160)) i += 18;
else if (i > (to-200)) i += 24;
else if (i > (to-300)) i += 40;
else i += 60;
window.scroll(0, i);
if (i >= to) clearInterval(int);
}, 15);
}
else {
var int = setInterval(function() {
if (i < (to+20)) i -= 1;
else if (i < (to+40)) i -= 3;
else if (i < (to+80)) i -= 8;
else if (i < (to+160)) i -= 18;
else if (i < (to+200)) i -= 24;
else if (i < (to+300)) i -= 40;
else i -= 60;
window.scroll(0, i);
if (i <= to) clearInterval(int);
}, 15);
}
}
else {
window.scroll({
top: to,
left: 0,
behavior: 'smooth'
});
}
}
};
You may pass arguments to the function as numeric value (scollTo-position in pixels) or as a call of an element with index (in my case LI nodes in an UL --> "articles").
您可以将参数作为数值（以像素为单位的 scollTo 位置）或作为具有索引的元素的调用（在我的情况下是 UL 中的 LI 节点 -->“文章”）传递给函数。
<a class="active" href="javascript:fnc_scrollto(0)">Home</a>
<a class="active" href="javascript:fnc_scrollto(457)">anywhere</a>
<a href="javascript:fnc_scrollto('elem',0)">element 1</a>
<a href="javascript:fnc_scrollto('elem',1)">element 2</a>
You may play around with the numbers to adapt the smooth effect to your needs. If you have a sticky navbar on top, you need to adapt the line
您可以使用数字来调整平滑效果以满足您的需要。如果顶部有粘性导航栏，则需要调整该行
if (to == 'elem') to = articles[id].offsetTop;
to your needs like e.g.
满足您的需求，例如
if (to == 'elem') to = parseInt(articles[id].offsetTop-navbar.clientHeight);
Hope you like it :-)
希望你喜欢 ：-）
回答by EoghanM
More specifically in a JavaScript context, the unsupported part is the behaviorparameter on scrollToOptions as detailed here:
更具体地说，在 JavaScript 上下文中，不受支持的部分是behaviorscrollToOptions 上的参数，详情如下：
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
