Ahora que Safari 15.4 ahora es compatible con el desplazamiento suave nativo, estoy buscando una forma confiable de verificar si un navegador usa el desplazamiento suave nativo.
He probado este método:
if (getComputedStyle(document.body).scrollBehavior === 'smooth') { console.log('Smooth scrolling natively supported '); }else{ console.log('Smooth scrolling NOT natively supported'); } Pero no detecta con precisión el desplazamiento suave en Chrome y Safari 15.4 (devuelve un falso negativo). Esto se debe a que scrollBehavior está configurado en auto .
También he probado este método:
let supported = 'scrollBehavior' in document.documentElement.style; if(supported == true){ console.log('Smooth scrolling natively supported '); }else{ console.log('Smooth scrolling NOT natively supported'); } Lo que parece ser más confiable, pero cuando deshabilito el desplazamiento suave en Google Chrome, lee un falso positivo. ¿Es posible que esto se deba a que el navegador lo admite, pero simplemente no está habilitado? (Lo deshabilité iniciando Chrome desde la terminal usando /Applications/Google\ Chrome.app --args --disable-smooth-scrolling )
¿Cuál es el mejor método para verificar si el desplazamiento suave es compatible de forma nativa con un navegador? ¿Alguien tiene una versión anterior (anterior a v61) en la que pueda probarlos u otros navegadores que no admitan de forma nativa el desplazamiento suave?
La forma más nativa de hacer esto sería usar la regla @supports CSS para verificar la compatibilidad del navegador:
@supports (scroll-behavior:smooth) { /* Supports smooth scrolling */ }Para hacer esta verificación en JavaScript, puede usar esta función en el objeto CSS:
if(window.CSS.supports('scroll-behavior', 'smooth')) { // Supports smooth scrolling }