How to detect end of an overflow on mobile when scrolling quickly?

Issue

On mobile you can "pull" the scrollable content and it keeps moving for a while by itself. How to detect when such movement has stopped? ontouchmove event doesn't get triggered while the content moves by itself.

Here is an example, I need to remove the "more content" banner when the user has scrolled to the left till the end. I'm reading how much of the scrollable area is left by using the ontouchmove event. But since the event only gets triggered while the user is actually actively touch-moving the content, there is no way to read how much scrollable area is left.

If I scroll till the end while pressing the content, everything is good:

If I quickly "pull" it and it keeps scrolling by itself, the ontouchmove event doesn't fire when reaching the end, so it's impossible to detect that the end is reached:

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>

Solution

You can use javascript event scrollend which is supported in some browsers, but a fairly new feature. This will detect when scrolling has stopped, as seen here and here. Edit: It was mentioned in a comment, you can use scrollend polyfill on browsers that do not support scrollend yet.

A method that will be less dependant on browser support would be to continuously check if the scroll event is occurring.

To use the scroll event you will have to use a debounce function because of how frequently the scroll event actually occurs when the user is scrolling.

Then, inside the debounce function you can check if the user has reached the end of scrollable container.

Here is an example:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

function handleScroll() {
    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";
    }
}

var debouncedHandleScroll = debounce(handleScroll, 250);

document.getElementById("scroll-container").addEventListener('scroll', debouncedHandleScroll);

Answered By - Jacob