Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

136
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda