I am trying to create simple eased scrolling. But I have hit a hurdle on mobile browsers with the selectionchange event and touchmove. I am trying to scroll the page when a user selects text and the selection moves past the current viewing area. But on mobile the touchmove event is fired after the user is finished selecting the text and removes their finger from the screen then places their finger back to the screen. I have only tested in android on chrome and opera but the effect is the same.

Is there a way to scroll my page when the user is selecting text or is this an impossibility?

Here is a sandbox Codesandbox.

And here is simple code:

const handleSelectionTouchmove = (e) => {
  const pageY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
  console.log(pageY)
};

const handleSelectionTouchend = () => {
  window.removeEventListener("touchmove", handleSelectionTouchmove);
  window.removeEventListener("touchmove", handleSelectionTouchend);
};

const onSelectionChange = (e) => {
  const selection = window.getSelection();

  if (!selection.isCollapsed) {
    window.addEventListener("touchmove", handleSelectionTouchmove);
    window.addEventListener("touchend", handleSelectionTouchend);
  }
}; 

Note:I have also tried using Pointer Events but the same thing happpens. I have also tried just setting a constant touchmove event and then setting a boolean isSelecting in the selectionchange event if the !selection.isCollapsed but the touch event is disabled when selecting. I have also tried just using the selectionchange event listener to just get the bounding client rect of the selection and go from there but then I run into isssues of selection direction and not accurately being able to find the selection point. In the codesandbox I have that code commented out if you wish to try it.