Tengo una página de mosaicos de imágenes que cambia a un visor de imágenes cuando se hace clic en un mosaico. Cuando el teatro está cerrado, se desplaza automáticamente hacia abajo hasta el mosaico de la última imagen vue. Una de las opciones para cerrar el teatro es deslizar hacia abajo en el móvil. Sin embargo, si el usuario sigue moviendo el dedo por la pantalla después de deslizar hacia abajo, el navegador evita que el script se desplace por la página.
¿Hay alguna manera de cancelar por la fuerza el toque del usuario o permitir que .scrollIntoView anule el desplazamiento del usuario?
Aquí hay un ejemplo rápido que armé. El script intenta desplazar suavemente la página hasta el último mosaico cada 2 segundos, pero si el usuario se desplaza durante la animación, se cancela.
setInterval(() => {
document.getElementById("target").scrollIntoView({
behavior: "smooth",
inline: "center"
});
document.getElementById("indicator").innerHTML = "Scrolling..."
setTimeout(() => {
document.getElementById("indicator").innerHTML = ""
}, 500);
}, 2000);
#container {
display: block;
position: relative;
width: 100%;
max-width: 500px;
display: inline-grid;
grid-template-columns: repeat(auto-fit, 150px);
justify-content: space-evenly;
}
.tile {
background-image: url(https://via.placeholder.com/150);
width: 150px;
height: 150px;
margin-top: 10px;
}
#indicator {
width: 100%;
max-width: 500px;
display: block;
position: fixed;
top: 5px;
text-align: center;
font-family: monospace;
}
<div id="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile" id="target"></div>
<div id="indicator"></div>
</div>