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

How to start countup only when scrolled? #24

Open
sofyanlabs opened this issue May 12, 2020 · 7 comments · May be fixed by #30
Open

How to start countup only when scrolled? #24

sofyanlabs opened this issue May 12, 2020 · 7 comments · May be fixed by #30

Comments

@sofyanlabs
Copy link

I want to start Countup Event when div scrolled, not on page load.

how to implement this?

@xlsdg
Copy link
Owner

xlsdg commented Jun 1, 2020

When div scrolled, call instance.update().

@sofyanlabs
Copy link
Author

can you give me example of code for this one?

@unek
Copy link

unek commented Jun 18, 2020

you can use :delay="-1" and vue-in-viewport-mixin to trigger instance.start().

@uzzal-ht
Copy link

I have same issue. Can you share any live example?

@babyradJiri
Copy link

would appreciate live example as well

@ghost
Copy link

ghost commented Jul 18, 2020

I have same issue. Can you share any live example?
would appreciate live example as well
can you give me example of code for this one?
When div scrolled, call instance.update().

Hello, I was having problems of this type and finally I solved it as follows.

First add the scroll directive before your Vue instance:

Vue.directive ('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value (evt, el)) {
        window.removeEventListener ('scroll', f)
      }
    }
    window.addEventListener ('scroll', f)
  }
})

Then, where they place the component, they add the attribute ref = "firstcomponent" (change the name of the ref) and v-scroll = "onReady" (method that will update the counter) to each component that they want to "update" to the time to scroll.

Example:

<div class="iCountUp">
<ICountUp :delay="delay" :endVal="endVal" :options="options" ref="firstcomponent" v-scroll="onReady"/>
</div>

Finally, in the method, they can do an if of this type:

if (window.scrollY> 800) {
                this.$refs.firstcomponent.update(that.endVal + 100);
 }

By doing this, each time the scrollY is greater than 800, each component will be updated with the assigned value, in this case "100".

@laurensV
Copy link

There is already a scroll spy in the countup.js library, but because instance.start() is always called, this option (enableScrollSpy) doesn't work with vue-countup-v2. PR needs to be made to only run .start() when enableScrollSpy is disabled

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 a pull request may close this issue.

6 participants