window.scroll平滑无法在Safari上运行

Question

当用户单击按钮时，我使用它来平滑滚动到特定部分：

window.scroll({
  top: $(this).data('y'),
  left: 0,
  behavior: 'smooth'
});

这适用于所有地方（包括Android手机），但适用于Safari（台式机和iPhone）。在这种情况下，它会滚动到正确的位置，但不平滑，就像跳了起来。

我在此处提供了有关Codepen的小演示。只需单击导航菜单选项，它将在此处滚动。这在Chrome上很流畅，但在Safari上却不流畅。

不支持吗？（查看doc似乎不是这种情况）受支持的选项是什么？

谢谢！

Answer 1

window.scroll支持，但scroll-behavior不支持CSS。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

在等待支持之前，请考虑使用smoothscroll-polyfill，它为Safari，IE和Edge添加了平滑滚动支持。

Answer 2

我最近将我的想法写成一个函数，这是一种 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'
            });
        }
    }
};

您可以将参数作为数值（以像素为单位的 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>

您可以使用数字来调整平滑效果以满足您的需要。如果顶部有粘性导航栏，则需要调整该行

if (to == 'elem') to = articles[id].offsetTop;

满足您的需求，例如

if (to == 'elem') to = parseInt(articles[id].offsetTop-navbar.clientHeight);

希望你喜欢 ：-）