如果浏览器已经具有平滑滚动功能，请检测

Question

[我在单击哈希链接时使用了这段JavaScript，向我的站点添加了平滑的滚动。

$('a[href*=#]')
    .click(onAnchorClick);

function onAnchorClick(event)
{
    return ! scrollTo(this.hash);
}


function scrollTo(target)
{
    var e = $(target);
    var y = e.exists() ? e.offset().top : 0;

    if(y == 0 && target != '#top')
        return false;

    if(Math.max($('html').scrollTop(), $('body').scrollTop()) != y)
        $('html,body')
            .animate({scrollTop: y}, 500, function() { location.hash = target; } );
    else
        location.hash = target;

    return true;
}

$.fn.exists = function()
{
    return this.length > 0 ? this : false;
}

在桌面浏览器中效果很好，并且至少在iOS设备上也能正常工作。但是，在我的WinPhone 8设备上，这是垃圾。滚动是一团糟，甚至没有到应有的位置。因此，我决定不通过if( ! /Windows Phone 8\.0/.test(navigator.userAgent))在此处启用它。

现在，它运行良好，并且似乎默认情况下WinPhone上的浏览器实际上可以平滑滚动，这很棒。

但是，如果浏览器默认情况下已经启用平滑滚动脚本，那么激活平滑滚动脚本当然有点愚蠢。有没有一种方法可以检测浏览器是否已启用平滑滚动功能？

Answer 1

是，不是。不幸的是，对于这些类型的事物没有标准。但是，有一些解决方法，您已经在其中一种方法：浏览器嗅探。

基本上，这与这种检测技术一样先进，因为某些浏览器甚至还没有正式支持平滑滚动或没有实验性开发（例如Chromium）。除非大多数都在同一页面上，否则不会设置标准。不仅如此，它还归结为GPU的硬件功能，因为某些设备和计算机在平滑滚动和动画处理方面遇到了困难。因此，从技术上讲，即使浏览器确实支持平滑滚动，也可以说运行该设备的设备或台式机的渲染速度足以显示效果。那是另一个瓶颈。

我相信在将来的某一天，将需要更多诸如此类的浏览器功能规范，以更好地改善用户交互，但是直到那一天您都做对了。

Answer 2

几年后，现在在工作草案中有了CSS属性：

scroll-behavior🎉

因此，我们可以这样做，而不是我最初提出的Javascript或类似的问题：

scroll-behavior

现在，它似乎适用于除IE和Edge以外的所有浏览器，并且由于这只是一个很好的功能，使事情看起来更好了……是的，我不太在意IE或边缘。 😛👍