Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scroll Progress (get)

See original GitHub issue

👉 Conclusion / Feature Specification

The discussion in this issue has resulted in a decision to implement the following API method:

// get scroll progress
// returns a number representing % scrolled of scrollable distance.
// 0 is start position and 1 is end position

embla.scrollProgress()

Example Usage

embla.on('scroll', () => {
  console.log(`Current progress is: ${embla.scrollProgress() * 100}%`)
}

CodeSandbox

See example usage.

Special thanks

@xiel for discussing this and sharing your thoughts and ideas. @welteki for the nice demonstration.

Issue Analytics

State:
Created 4 years ago
Reactions:5
Comments:11 (10 by maintainers)

Top GitHub Comments

3reactions

davidjerlekecommented, Oct 7, 2019

Hello @xiel and @welteki,

I’m happy to announce that the first part of this, the scroll progress getter has been released with version 2.5.0 🚀.

Read more here or check this CodeSandbox out.

Enjoy!

1reaction

xielcommented, Sep 28, 2019

Yes, I would expect it to be an instant setter by default.

Top Results From Across the Web

How To Create a Scroll Indicator - W3Schools

We have created a "progress bar" to show how far a page has been scrolled. It also works when you scroll back up....

Scroll progress indicator | Webflow University

Create a horizontal progress indicator that scales as visitors scroll down the page.

Page scroll progress with JavaScript | by Moin Uddin - Medium

I'll just define another function to be called whenever progress is updated. ... progress = (document.body.scrollTop / ( document.body.scrollHeight - window.

javascript - Scroll progress bar in an element - Stack Overflow

I am trying to make a scroll progress indicator on a div element. It works, but it only detects window scrolls and not...

How to Add a Page Scroll Progress Bar at the Top of Your ...

Let's add some additional styling to the indicator. First, find the link to the css/style.min.css CSS file in index.html and remove min from...