Me estoy tirando de los pelos porque, por alguna razón, cuando paso behavior: smooth como parámetro para window.scroll , la función deja de funcionar por completo en Chrome. Sin behavior:smooth , se desplaza como se esperaba. Estoy bastante seguro de que se trata de un error de Chrome, pero he usado behavior:smooth en otro lugar sin problemas, así que me pregunto qué tiene de especial la configuración en esta página que está causando el problema. Aquí está la configuración, que con suerte le permitirá reproducir:
Tengo un documento con varios divs del tamaño de una ventana gráfica así:
html:
<body> <div class="slide" data-ind="0"></div> <div class="slide" data-ind="1"></div> <div class="slide" data-ind="2"></div> </body>CSS:
.slide{ width:100%; height:100vh; border-bottom:1px solid black; box-sizing:border-box; }Estoy tratando de usar un detector de eventos para desplazarme a una diapositiva cuando presiona una tecla de flecha, así:
window.addEventListener('keydown',function(){ if(event.key=='ArrowRight'){ let el=document.querySelector('.slide[data-ind="1"]'); let dist=el.offsetTop; window.scroll({ top:dist, left:0, behavior:'smooth' }) } }) Actualización: algunas pruebas más han dejado en claro que el error solo ocurre cuando se usa window.scroll dentro de un evento de teclado.
Pude resolver esto agregando event.preventDefault(); al evento del teclado. Todavía no está claro si se trata de un comportamiento previsto/estándar, ya que Firefox no tuvo ese problema incluso sin agregar esta línea.