When scrolling on mobile, you can initiate a "pull" motion where the content continues to move on its own. How can one determine when this movement has ceased? The ontouchmove event does not trigger during this autonomous scrolling.
For example, I want to remove the "more content" banner once the user has scrolled all the way to the left. I attempt to track how much scrollable area remains using the ontouchmove event. However, since this event only registers when the user actively touches and moves the content, it's impossible to gauge the remaining scrollable area.
If I manually scroll to the end by pressing down on the content, everything works smoothly:
https://i.sstatic.net/3sXkp.gif
However, if I rapidly pull the content and it continues to scroll autonomously, the ontouchmove event fails to activate upon reaching the end, thus making it challenging to detect that the terminal point has been reached:
https://i.sstatic.net/IOEV7.gif
function onTouchMove() {
const node = document.getElementById("scroll-container");
const overflownOnRight = Math.ceil(node.scrollLeft + node.offsetWidth) < node.scrollWidth;
if (!overflownOnRight) {
document.getElementById("info-banner").style.display = "none";
} else {
document.getElementById("info-banner").style.display = "block";
}
}.scroll-container {
margin-top: 100px;
width: 100%;
height: 40px;
overflow-y: auto;
&::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
}
.reference-point {
height: 30px;
width: 100%;
border: 5px dotted pink;
}
.scrollable {
width: 1200px;
height: 100%;
background: blue;
display: flex;
}<div id="scroll-container" ontouchmove="onTouchMove(event)" class="scroll-container shadowed">
<div class="scrollable">
<div class="reference-point">
</div>
</div>
</div>
<div id="info-banner">
Scroll Right For More Content
</div>