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

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

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

我相信将来某一天会有更多需要浏览器功能的规范，以便更好地改善用户互动，但直到那一天你才能正确行事。

Answer 3

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

scroll-behavior?

因此，我们可以执行以下操作，而不是使用原始问题或类似内容中的Javascript：

html {
  scroll-behavior: smooth;
}

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

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

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

3 个答案: