SolidJS•2y ago

Getting accurate scrollWidth is hard

I can not get the correct value for scrollWidth in a child component. When I say correct value I mean the scroll width changes based on certain buttons clicked. This is my current approach:
Parent Component createEffect that gets the correct scrollWidth of a div when I console log it. That's great. From here it's not so great.

createEffect(() => {
    if (data() === 'ready') {
      console.log('in the parent: ', divRef.scrollWidth)
      divRef.focus()
    }
  })

Then to load the child component:

<Show
        when={data() === 'ready'}
        fallback={
          <div class='text-textColor'>Hold Your Horses</div>
        }
      >
        TEST: {divRef.scrollWidth}
        <Child
          divRef={divRef}
          scrollWidth={divRef.scrollWidth}
        />
      </Show>

The console log in the create effect is always correct. But it's wrong everywhere else.... Passing scroll width into the child component as a prop. That value is different from what the createEffect in the parent console logs. Also where it says "TEST: {divRef.scrollWidth}" is different from the console.log in the create effect. This is a recurring problem I have. I try things like signals and derived signals. I look around online and there are tons of posts from people using react and svelte also having trouble getting accurate scrollWidth/scrollHeight values. I'm going to try using createMemo now that I think of that

9 Replies

Unknown User•2y ago

Message Not Public

Grahf•2y ago

i guess the ref isn't updating. Found this from fabiospampinato refs can change, you want to be notified of updates, and there's just one thing that can notify you of updates: a signal. You don't need anything else. You use a signal for your ref and the code will always be correct. You use a magic ref and you are asking for trouble.

Unknown User•2y ago

Message Not Public

Otonashi•2y ago

are you expecting TEST and the prop to be updated? because there's nothing reactive there i don't think that's the issue because createEffect shows the updated scrollWidth if you don't expect it to be updated and you're just trying to grab the scrollWidth after creating the div then you would have to read it after the div is in the dom, which it is in the effect but not as you're trying to access it in the jsx currently since that's before it's inserted so the solution would be to have a signal containing the scrollWidth and update that during the effect phase i.e.

const [scrollWidth, setScrollWidth] = createSignal(0);
onMount(() => setScrollWidth(divRef.scrollWidth));

const [scrollWidth, setScrollWidth] = createSignal(0);
onMount(() => setScrollWidth(divRef.scrollWidth));

though if the div itself is being recreated then divRef won't cause update when it changes as fabio says

Otonashi•2y ago

example of what i'm saying https://playground.solidjs.com/anonymous/cbdbc18b-8269-4245-b942-2abc273dd203

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Grahf•2y ago

I basically did this except I used createEffect instead of onMount. The div scrollwidth changes a lot. With the onMount it would only get the initial value. Witht he createEffect it seems to get the right values for scrollwidth as the content of the div changes

Unknown User•2y ago

Message Not Public

Grahf•2y ago

I don't understand why const scrollWidth = () => divRef.scrollWidth doesn't work but I'm glad the createEffect + signal works 🙂

Unknown User•2y ago

Message Not Public

Gaming

Programming

Getting accurate scrollWidth is hard