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

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>