Skip to content

ScrollSpy does not reset countUp when the user scrolls back to the top of the page #294

Closed
@paidge

Description

@paidge
[X] Bug
[ ] Feature request

CountUp.js version: 2.3.2

Description

  1. Activate scrollSpy by passing it to options :
    this.countUp = new CountUp(dom, this.endVal, {enableScrollSpy : true})

  2. Scroll until you can see the countUp : it starts counting (expected behaviour)

  3. Continue scrolling : when the countUp disappears, the countUp resets (expected behaviour)

  4. Now, scroll back to the top of the page and scroll again until you can see the countUp again : the countUp has not been reset

This code should do the trick (line 106 of ./src/countUp.ts) :

handleScroll(self: CountUp): void {
	if (!self || !window || self.once) return;
	
	const bottomOfScroll = window.innerHeight +  window.scrollY;
	const rect = self.el.getBoundingClientRect();
	const topOfEl = rect.top + window.pageYOffset
	const bottomOfEl = rect.top + rect.height + window.pageYOffset;
	
	if (bottomOfEl < bottomOfScroll && bottomOfEl >  window.scrollY && self.paused) {
		// in view
		self.paused = false;
		setTimeout(() => self.start(), self.options.scrollSpyDelay);
		if (self.options.scrollSpyOnce)
		self.once = true;
	} else if (
          (window.scrollY > bottomOfEl || topOfEl > bottomOfScroll) &&
          !self.paused
        ) {
		// out of view
		self.reset();
	}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions