SolidJS•2y ago

How to recover scroll bar position with Show?

I'm using <Show> to render component. The component has scroll bar. But when I re-render if <Show when = { true } > I lost scroll bar position.

17 Replies

thetarnav•2y ago

my two solution ideas: 1. You could probably just hide the component with display:none instead of conditionally rendering component 2. cache the previous scroll position onClenaup and reset it onMount

musicloverOP•2y ago

2nd solution is much better...I'll try it out thanks..

musicloverOP•2y ago

I'm trying 2nd solution, but it's not working. Can't I put signal inside? It seems when component is re-rendered by Show, the signal value goes 0. Does it re-create signal,too?

thetarnav•2y ago

Does it re-create signal,too?

yup createSignal is pretty much like new Array(), new data instance

musicloverOP•2y ago

Isn't Solid component function called once? not like React

REEEEE•2y ago

But Show unmounts it

musicloverOP•2y ago

Then, Should I put signal outside function?

thetarnav•2y ago

not sure if you need a signal at all just store the position in a variable

musicloverOP•2y ago

Global variable?

thetarnav•2y ago

if this component can be mounted in multiple places at once, you probably should manage the cache by a key or something, but just a let variable that you udpate is fine

musicloverOP•2y ago

Then, it's not re-usable component, whenever I use this component, I need to declare global variable..

thetarnav•2y ago

you can re-use the variable too but you can also use the parent component for that

musicloverOP•2y ago

Is there no way to put any storable variable inside function in unmountable component ?

thetarnav•2y ago

if you don't unmount the component, there is no problem but you unmount it and then mount a compleately new instance of it there are ways to solve it, but you need to have a link between diffferent component instances, it doens't self-contain the state anymore

musicloverOP•2y ago

Ok, So If we use <Show>, the component function will be called like React right?

thetarnav•2y ago

you can even do this

const createFoo = () => {
  let myCache
  const Foo = () => {
    /* your component that can reuse the myCache variable */
  }
  return Foo
}


// in parent

const Foo = createFoo()

<Show>
  <Foo/>
</Show>

const createFoo = () => {
  let myCache
  const Foo = () => {
    /* your component that can reuse the myCache variable */
  }
  return Foo
}


// in parent

const Foo = createFoo()

<Show>
  <Foo/>
</Show>

musicloverOP•2y ago

Thanks thetarnav! It's amazing approach. I didn't know I could wrap component function by other function...

Gaming

Programming

How to recover scroll bar position with Show?