Nested inview components?

maciekgrzybek / svelte-inview

A Svelte action that monitors an element enters or leaves the viewport.🔥

MIT License

749 stars 23 forks source link

Nested inview components? #21

Closed oneezy closed 2 years ago

oneezy commented 2 years ago

Hi again!

I'm trying to get this nested ScrollSpy <Component /> working inside itself but having some issues. https://svelte.dev/repl/b19d297fc3a44719b9d2b7dc881ebeb7?version=3.48.0

I tried using but I don't think I'm doing it correctly.

The issue as you'll see is that "Section 2" isn't staying active (only the children sections become active)

maciekgrzybek commented 2 years ago

From what I can see (just had a quick glance), this has nothing to do with the library itself :) I'll try to find some time today and will try to help you :)

maciekgrzybek commented 2 years ago

Sorry, was really busy for the last 2 weeks. Ok, so:

svelte:self won't work here, it's doing something else
you check if the element is active by comparing id to the href class:active={#${$activeSectionId}=== href} - this won't be true for the parents (because section2a !== section2
you need to find a different way to compare it, maybe create a separate component ParentSectionLink that will check the regex instead

maciekgrzybek commented 2 years ago

Closing this one :) Let me know if it's sorted :)