SolidJS•2y ago

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), */
    /* ) */
  }

  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), */
    /* ) */
  }

3 Replies

GrahfOP•2y ago

even with the timeout it scrolls to wrong element but second click always scrolls to the right ref i need to do some console logging

REEEEE•2y ago

Is the effect inside of the scrollToSelected function? Why not move it outside and check when matchingRef updates and then call scrollIntoView

GrahfOP•2y ago

Hello. I tried that. Added a console log too. the matchingRef is always undefined on the first click. second click it gets the right ref. investigating

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

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

only way I can get it to work. Going to work on getting rid of the timeout tomorrow

const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    const matchingRef = () =>
      paragraphRefs().find((ref) => ref.id() === para.paragraphId)

    createEffect(() => {
      const matchingRefValue = matchingRef()
      setTimeout(() => {
        matchingRefValue?.ref.scrollIntoView({ behavior: 'smooth' })
      }, 600)
    })
  }

const scrollToSelectedSearch = (para) => {
    if (para.bookTitle && para.translatorName) {
      navigate(`/book/${para.bookTitle}/${para.translatorName}`)
    }
    const matchingRef = () =>
      paragraphRefs().find((ref) => ref.id() === para.paragraphId)

    createEffect(() => {
      const matchingRefValue = matchingRef()
      setTimeout(() => {
        matchingRefValue?.ref.scrollIntoView({ behavior: 'smooth' })
      }, 600)
    })
  }

Gaming

Programming

Navigate then scroll