I have a page of image tiles that transitions into an image viewer when a tile is clicked. When the theater is closed, it automatically scrolls down to last viewed image's tile. One of the options for closing the theater is swiping down on mobile. However, if the user keeps moving their finger across the screen after swiping down, the browser prevents the script from scrolling the page.
Is there a way to forcibly cancel the user's touch or otherwise allow .scrollIntoView to override user scrolling?
Here's a quick example I threw together. The script attempts to smooth scroll the page to the last tile every 2 seconds, but if the user scrolls during the animation, it gets canceled.
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>