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

我在点击散列链接时使用这段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（！/windowsphone8\.0/.test（navigator.userAgent））

在那里启用它

现在它工作得很好，WinPhone上的浏览器在默认情况下看起来是平滑滚动的，这很好

---

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

是和否。不幸的是，这些类型的东西没有标准。然而，有一些解决方法，其中一个你已经在做了：浏览器嗅探

基本上，这和这种检测一样先进，因为有些浏览器甚至还不支持正式的平滑滚动或没有实验性开发（如Chromium）。除非大多数人都在同一页上，否则不会制定标准。不仅如此，它还归结为GPU硬件能力，因为一些设备和计算机难以实现平滑滚动和动画。所以从技术上讲，即使浏览器支持平滑滚动，谁能说运行它的设备或桌面渲染速度足够快，甚至可以显示效果呢。这是另一个瓶颈

---

我相信在将来的某一天，像这样的浏览器功能规范会有更多的需求，以更好地改善用户交互，但直到那一天，你才做得对。

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

---

我用这种方法解决了这个问题：

身体{
滚动行为：平滑；
}
if（getComputedStyle（document.body）.scrollBehavior=='smooth'）{
log（'此浏览器支持滚动'）；
}

可能在每个动画步骤中检查

.scrollTop

是否仍然具有您以前分配给它的值。当然，这需要手动完成，当然不是使用

.animate（）

，但应该不会太难。@Bergi-（我知道这是5年后的事了，但是…）实施的一个不幸的副作用是，它将滚轮事件误用于这些平滑滚动事件。当用户移动鼠标滚轮一次时，平滑滚动会连续触发滚轮事件，以便从中滚动。然而，用户实际上并没有移动轮子。@TravisJ幸运的是，现在还有一个CSS替代方案！作为一个新的被接受的答案，它现在是未来的某一天，这是一个实际的问题。平滑滚动的实现做得很差，在查看控制盘事件时会产生不幸的副作用。不幸的是，chrome似乎不遵守此css标志，即使设置了“自动”，它仍将使用平滑滚动行为。@TravisJ在我的Chrome中运行良好。设置“自动”时，我的测试用例仍会触发平滑滚动（自动应默认为非平滑）。我没有测试反向的执行（平滑滚动的启用），这就是我认为你的意思“工作正常”。是的<代码>自动对我来说听起来像是“浏览器/操作系统决定的默认设置”，而

平滑

强制平滑滚动。所以，我想对于您的情况，有一个缺少状态

off

或

unsmooth

或类似的什么浏览器更改了这个属性？您可以在“我可以使用”中查看此信息。这里的想法不是要知道哪个浏览器支持此功能，而是要检测客户端浏览器是否实现了此功能。如果该属性是在元素上计算的，则可以假定它具有实现。我曾尝试在支持滚动行为的浏览器中使用它，但它不起作用，因此我很好奇您是否在某些浏览器中可以使用它。

element

此处是HTML元素的引用，例如：

var element=document.querySelector（'a'））

。但是该元素必须在CSS中将scrollBehavior属性预定义为“平滑”。如果浏览器能够设置该属性，那是因为它支持该属性。很清楚吗？我会在我的例子中更好地解释它