Estoy tratando de crear un desplazamiento simplificado simple. Pero me encontré con un obstáculo en los navegadores móviles con el evento de cambio de selectionchange y movimiento táctil. Estoy tratando de desplazarme por la página cuando un usuario selecciona texto y la selección se mueve más allá del área de visualización actual. Pero en dispositivos móviles, el evento touchmove se activa después de que el usuario termina de seleccionar el texto y quita el dedo de la pantalla y luego vuelve a colocar el dedo en la pantalla. Solo he probado en android en chrome y opera pero el efecto es el mismo.
¿Hay alguna forma de desplazar mi página cuando el usuario está seleccionando texto o es imposible?
Aquí hay una caja de arena Codesandbox .
Y aquí hay un código simple:
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); } }; Nota: también he intentado usar Pointer Events pero sucede lo mismo. También intenté configurar un evento de movimiento táctil constante y luego configurar un booleano isSelecting en el evento de cambio de selectionchange si !selection.isCollapsed pero el evento táctil está deshabilitado al seleccionar. También intenté simplemente usar el detector de eventos de cambio de selectionchange para obtener el cliente delimitador recto de la selección e ir desde allí, pero luego me encontré con problemas de dirección de selección y no pude encontrar con precisión el punto de selección. En el codesandbox tengo ese código comentado si deseas probarlo.