javascript - 是否可以测试 scrollIntoView 浏览器兼容性？

Question

我正在寻找一种方法来对用户浏览器的 scrollIntoView 功能进行实时测试。这不是“caniuse”检查；相反，我想要优雅的退化。我正在使用 jQuery，如果 scrollIntoView 正常运行，我想使用 preventDefault()。

我开始于:

        if (window.scrollIntoView) {
            e.preventDefault();
            $('p#result').text('scrollIntoView is available');
        } else {
            $('#result').text('scrollIntoView is not available');
        }

但我在检查器中看到 window.scrollIntoView 是 undefined。但是，因为 scrollIntoView 有效(在我的 Chrome 和 FireFox 版本中)，它不应该是未定义的。我还有哪些其他选项可以查看用户的浏览器是否支持该功能？

Answer 1

检查 scrollIntoView 是否仅支持 bool 值 true/false 或是否还支持平滑滚动行为也很方便。

var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style;
if(isSmoothScrollSupported) {
    element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});    
} else {
    element.scrollIntoView(false);
}