ScrollSpy: improve active feedback

[guilhas07]

Motivation & Context

Current ScrollSpy behavior had some shortcomings when it comes to detecting the correct active class.

• Sometimes none of the classes are active
• After clicking to go to a section, it immediately shows as non active

Solution

To fix this I simplified the current logic, by adding an active state for all sections and keeping track of the previous highlighted section. The current rational is to highlight the first section that is intersecting at all times.

Different logic for scrolling up or down and custom thresholds are removed due to not being needed anymore.

Note: This is a first draft, so I didn't delve deeper into all of the code that can be simplified. I would be grateful for any feedback. Thank you for your time and for this amazing project!

Changes

Scroll Behaviour:

• Before ( Note that sometimes the active class disappears and other times it jumps to early ):

old-scroll.mp4

• After:

new-scroll.mp4

Click Behaviour:

• Before (Note the section clicked isn't active after auto scroll)

old-click.mp4

• After

new-click.mp4

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• Refactoring (non-breaking change)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live Previews

https://deploy-preview-41016--twbs-bootstrap.netlify.app/docs/5.3/getting-started/introduction/

[Manchmal1]

Was muß ich machen um die auf dem Fernseher zu sehen bitte