Comments (3)
Trying to figure out why this is happening too. The demo site does not have this issue though, any ideas why?
from svelte-toc.
The problem is svelte-toc
currently only looks at the first intersection entry returned by the IntersectionObserver
and always makes that the active heading:
Lines 48 to 50 in 3b995cd
When two headings change visibility simultaneously (or at least close in time to be within one update cycle of the observer), both are passed into the callback function. Maybe the order of entries depends on scroll direction or something like that. In any case which of the two becomes the active heading appears to be up to chance at that point. I think that's why the active heading jumps around erratically. So a solution might be to compare the intersectionRatio
of all returned entries and pick the one with the highest value as active. Or pick the one closest to the center of the screen.
from svelte-toc.
This should be fixed now in v0.2.0 which is a rather big rewrite. It also adds the feature to auto-scroll within the ToC to always keep the currently active heading in view.
@thedivtagguy Would be great if you could give it a try and report back issues if any. There might be some due to the amount of changes.
from svelte-toc.
Related Issues (20)
- Quick questions HOT 1
- Getting error about resolving `$app/stores` HOT 7
- Strange behaviour HOT 16
- Prevents scroll when using smart zoom on macOS HOT 1
- [Question] Split into sections HOT 4
- Component persisting on page change when not required HOT 2
- How do I customize the font-size of each item of the ToC? HOT 4
- New prop for toc nav overflow-y HOT 1
- Component insists on starting at full height above the text HOT 4
- Svelte-toc interferes with other anchor links in the document HOT 9
- [Question]TypeScript support HOT 4
- Is there an option to hide the scrollbar if the ToC doesn't reach certain size? Or just hide in general? HOT 4
- Disable blur initial transition animation HOT 1
- SvelteKit page navigation breaks when svelte-toc is shown HOT 1
- Add option to only show sublevel headings below currently active top-level heading
- Issues with highlighting the correct content HOT 1
- Hide when intersecting with user-specified DOM nodes
- Add slots for custom ToC items HOT 1
- Add tests
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-toc.