准确检测浏览器是否支持平滑滚动？

Question

既然 Safari 15.4 现在支持原生平滑滚动，我正在寻找一种可靠的方法来检查浏览器是否使用原生平滑滚动。

我试过这个方法：

if (getComputedStyle(document.body).scrollBehavior === 'smooth') {
    console.log('Smooth scrolling natively supported ');
}else{
    console.log('Smooth scrolling NOT natively supported');
}

但它无法准确检测 Chrome 和 Safari 15.4 上的平滑滚动（它返回误报）。这是因为 scrollBehavior 设置为 auto.

这个方法我也试过：

let supported = 'scrollBehavior' in document.documentElement.style;
if(supported == true){
    console.log('Smooth scrolling natively supported ');
}else{
    console.log('Smooth scrolling NOT natively supported');
}

这似乎更可靠，但是当我在 Google Chrome 上禁用平滑滚动时，它会读取误报。这可能是因为浏览器支持它，但它没有启用？（我通过使用 /Applications/Google\ Chrome.app --args --disable-smooth-scrolling 从终端启动 Chrome 来禁用它）

检查浏览器是否原生支持平滑滚动的最佳方法是什么？有没有人有可以测试这些的旧版本（v61 之前的版本）或其他本身不支持平滑滚动的浏览器？

Answer 1

执行此操作的最本机方法是使用 @supports CSS at-rule 检查浏览器支持：

@supports (scroll-behavior:smooth) {
    /* Supports smooth scrolling */
}

要在 JavaScript 中执行此检查，您可以在 CSS 对象上使用此函数：

if(window.CSS.supports('scroll-behavior', 'smooth')) {
    // Supports smooth scrolling
}

准确检测浏览器是否支持平滑滚动？

Accurately detect if a browser supports smooth scrolling?

html

javascript

css

smooth-scrolling