Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

139
Vistas
How to distinguish manual scroll from programatically triggered one

I need a way to distinguish manual scroll from programmatically called el.scrollIntoView() I tried to google it and they have some suggestion like to use wheel event and similar, but that is not solving the problem as it is not covering every scroll type ( for example it is not including manual scroll when you drag and drop scrollBar)

Here is the code for better context:

const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
const autoScrollDelay: any = useRef(null);


useAutoScroll(autoScrollEnabled);

const pauseAutoScroll = () => {
    if (autoScrollEnabled) {
      setAutoScrollEnabled(false);
    }
    clearTimeout(autoScrollDelay.current);
    autoScrollDelay.current = setTimeout(() => {
      setAutoScrollEnabled(true);
    }, 3000);
  };

  const onScroll = useCallback(
    event => {
      if (isPlaying) {
        pauseAutoScroll();
      }
    },
    [isPlaying, autoScrollEnabled],
  );

  useEffect(() => {
    const list = document.querySelector(
      "[data-testid='@panel-layout/content']",
    );

    list?.addEventListener('scroll', onScroll);

    return () => {
      list?.removeEventListener('scroll', onScroll);
      clearTimeout(autoScrollDelay?.current);
    };
  }, [onScroll]);

Autoscroll hook

export const useAutoScroll = (enabled = true) => {

  const currentTime = useSelector(state => state.timeline.currentTime);
  const isPlaying = useSelector(state => state.timeline.isPlaying);

  const shouldAutoScroll = currentTime && enabled && isPlaying;

  useEffect(() => {
    if (shouldAutoScroll) {
       const currElUuid = calculateUuid();
       const el = document.querySelector(`[data-uuid="${currElUuid}"]`);
       if (el) {
          el.scrollIntoView({ behavior: 'smooth', block: 'end' });
        }
    }
  }, [currentTime, enabled, isPlaying, subs, lastHighlightedUuid]);
};

And then in custom hook I am calling el.scrollIntoView({ behavior: 'smooth', block: 'end' }); , which triggers the same scroll listener as the manual one, and all the time calls my pauseAutoScroll() method which I need to prevent from being called by scrollIntoView.

Would really appreciate your help 🙌

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda