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

【问题标题】：Detect if browser has smooth scrolling feature already检测浏览器是否已经具有平滑滚动功能
【发布时间】：2014-06-03 01:49:11
【问题描述】：

当点击哈希链接时，我使用这段 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上的浏览器似乎默认是平滑滚动的，非常棒。

但是如果浏览器已经默认启用平滑滚动脚本当然有点愚蠢。有什么方法可以检测浏览器是否已启用平滑滚动功能？

【问题讨论】：

也许在每个动画步骤中检查.scrollTop 是否仍然具有您之前分配给它的值。当然，这需要手动完成，而不是 .animate()，当然，但应该不会太难。
@Bergi - （我知道这是 5 年后的事了，但是......）实施的一个不幸的副作用是它滥用了这些平滑滚动事件的滚轮事件。当用户移动鼠标滚轮一次时，平滑滚动会连续触发滚轮事件以便滚动。但是，用户实际上并没有在移动轮子。
@TravisJ 幸运的是，现在还有一个 CSS 替代方案！将其添加为新接受的答案????|

标签： javascript browser cross-browser browser-detection

【解决方案1】：

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

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

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

【讨论】：

哪些浏览器会改变这个属性？
caniuse.com/#search=scroll-behavior 这个你可以在“我可以使用”中查看。这里的想法不是知道哪个浏览器支持这个，而是检测客户端浏览器是否实现了这个功能。如果属性是在元素上计算的，您可以假设它具有实现。
我尝试在支持滚动行为的浏览器中使用它，但它不起作用，所以我很好奇你是否在某些浏览器中使用它。
element 这里是一个 HTML 元素的引用，例如：var element = document.querySelector('a')。但是该元素必须在 CSS 中将 scrollBehavior 属性预定义为“平滑”。如果浏览器能够设置该属性，那是因为它支持它。很清楚吗？
我会尝试在我的例子中更好地解释它

【解决方案2】：

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

scroll-behavior?

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

html {
  scroll-behavior: smooth;
}

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

现在，它似乎适用于除 IE 和 Edge 之外的所有浏览器，因为这只是一个不错的功能，可以让事情看起来更漂亮......是的，我并不关心 IE或边缘。 ??

【讨论】：

不幸的是 chrome 似乎不遵守这个 css 标志，即使设置了 auto 仍然会使用平滑滚动行为。
@TravisJ 在我的 Chrome 中运行良好。
我的测试用例在设置自动时仍然返回触发平滑滚动（自动应该默认为非平滑）。我没有测试反向的执行（启用平滑滚动），这就是我假设您的意思是“工作正常”。
是的。 auto 对我来说听起来像是“浏览器/操作系统决定的默认值”，smooth 强制平滑滚动。所以，我猜你的情况缺少off 或unsmooth 或类似的状态?‍♂️

【解决方案3】：

是和不是。不幸的是，这些类型的东西没有标准。但是有一些变通方法，您已经在做其中之一：浏览器嗅探。

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

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

【讨论】：

所以，现在是未来的某一天，这是一个实际问题。平滑滚动的实现做得很差，在查看滚轮事件时会导致不幸的副作用。