检测浏览器是否已具有平滑滚动功能

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

我设法以这种方式解决它：

<style>
  body {
    scroll-behavior: smooth;
  }
</style>

<script>
 if(getComputedStyle(document.body).scrollBehavior === 'smooth'){
   console.log('This browser supports scrollBehavior smooth');
 }
</script>

Answer 2

几年后，工作草案中有一个 CSS 属性：

scroll-behavior

因此，我们可以这样做，而不是我原来的问题中的 Javascript 或类似问题：

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

现在，它似乎适用于除 IE 和 Edge 之外的所有浏览器，因为这只是一个可有可无的功能，可以让事情看起来更好一点……是的，我不太关心 IE 或 Edge。