SolidJSS
SolidJSโ€ข3y agoโ€ข
6 replies
Grahf

Navigate then scroll

Sorry about the super accurate title

This code is for an onClick event. Well, this is one version of it..... I've tried a lot of things. It's just supposed to find the right thing to scroll to and then scroll to it.

It acts strangely if the if block at the beginning is executed(if the if block is skipped the code works fine). The if blocks navigates to a new page which in turn updates the paragraphRefs used here.

The problem is that it will either not scroll or scroll to the wrong element (depending on which version of my code im using). But then if I click the same button it's attached to a second time it scrolls to the right element. I've tried to use a signal and a memo for matchingRef. Using a timeOut of 1000(1 second) after the if block seemed to work but I didn't test it that much.
  const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    const matchingRef = () =>
      paragraphRefs().find((ref) => ref.id() === para.paragraphId)

    createEffect(() => {
      matchingRef()?.ref.scrollIntoView({ behavior: 'smooth' })
    })

    /* setMatchingRef( */
    /*   paragraphRefs().find((ref) => ref.id() === para.paragraphId), */
    /* ) */
  }
Was this page helpful?