Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhancement: #500 Flag for the ScrollSpy component that ensures the last active element remains visible + animationDuration option #504

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

IvanPostu
Copy link
Member

@IvanPostu IvanPostu commented Sep 8, 2024

fixes #500

Proposed changes

Screenshots (if appropriate) or codepen:

Demo Video

Types of changes

  • Bug fix (non-breaking change which fixes an issue).
  • New feature (non-breaking change which adds functionality).
  • Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

  • I have read the CONTRIBUTING document.
  • My commit messages follows the conventional commit format
  • My change requires a change to the documentation, and updated it accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@IvanPostu IvanPostu self-assigned this Sep 8, 2024
@wuda-io
Copy link
Member

wuda-io commented Sep 9, 2024

Nice, your video explaines it very clearly 👍 i will review the code tomorrow.

src/scrollspy.ts Outdated
Comment on lines 304 to 330

function getDistanceToViewport(element) {
const rect = element.getBoundingClientRect();
const distance = rect.top;
return distance;
}

function smoothScrollIntoView(element, duration = 300) {
const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
const startPosition = (window.scrollY || window.pageYOffset);
const distance = targetPosition - startPosition;
const startTime = performance.now();

function scrollStep(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const scrollY = startPosition + distance * progress;

if (progress < 1) {
window.scrollTo(0, scrollY);
requestAnimationFrame(scrollStep);
} else {
window.scrollTo(0, targetPosition);
}
}
requestAnimationFrame(scrollStep);
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think this two functions should be inside of the class. The rest looks nice!
Can you place them as private functions, then i will merge. Thanks

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✔️

@IvanPostu IvanPostu changed the title enhancement: #500 Flag for the ScrollSpy component that ensures the last active element remains visible enhancement: #500 Flag for the ScrollSpy component that ensures the last active element remains visible + animationDuration option Sep 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Flag for the ScrollSpy component that ensures the last active element remains visible
2 participants