<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx" -->

---
title: How to Calculate the Scroll Progress of a Webpage or Any...
description: Discover how to calculate the scroll progress of a webpage or any arbitrary element using a few lines of JavaScript and CSS. This technique leverages...
canonical: https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: How to Calculate the Scroll Progress of a Webpage or Any Arbitrary Element | daily.dev
og:description: Discover how to calculate the scroll progress of a webpage or any arbitrary element using a few lines of JavaScript and CSS. This technique leverages...
og:url: https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx
og:image: https://api.daily.dev/og/posts/wYL5nKtTX.png
og:image:alt: How to Calculate the Scroll Progress of a Webpage or Any Arbitrary Element
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Calculate the Scroll Progress of a Webpage or Any Arbitrary Element

**[Collections](https://daily.dev/sources/collections)** · 2 min read · 25 upvotes · 1 comments

## Summary

Discover how to calculate the scroll progress of a webpage or any arbitrary element using a few lines of JavaScript and CSS. This technique leverages scroll-driven animations and the @property CSS at-rule, enhancing interactivity and user experience in web designs.

## Content

# How to Calculate the Scroll Progress of a Webpage or Any Arbitrary Element

Learn how to calculate the scroll progress of a webpage and even track the scroll progress of any arbitrary element on the page using a few lines of code. This technique, which leverages scroll-driven animations and the @property CSS at-rule, allows for easy integration and customization in various animations and interactive designs.

## Calculating Scroll Progress of the Entire Page
To calculate the scroll progress of the entire webpage, you can use a combination of JavaScript and CSS. Here’s a quick guide to get you started:

1. **Add an Event Listener:** Attach a scroll event listener to the window object

    ```javascript
    window.addEventListener('scroll', () => {
        const scrollTop = window.scrollY;
        const docHeight = document.documentElement.scrollHeight - window.innerHeight;
        const scrollProgress = (scrollTop / docHeight) * 100;
        document.documentElement.style.setProperty('--scroll-progress', scrollProgress + '%');
    });
    ```

2. **Use the Scroll Progress in CSS:** Define the @property and use your custom property in your CSS for styling purposes.

    ```css
    @property --scroll-progress {
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: false;
    }

    body::after {
        content: '';
        width: var(--scroll-progress);
        height: 5px;
        background: #000;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
    }
    ```

## Calculating Scroll Progress of an Arbitrary Element
To track the scroll progress of any arbitrary element rather than the entire page, you can use a similar approach but with slight adjustments to target the specific element:

1. **Select and Track the Scroll Progress of the Element:**

    ```javascript
    const element = document.querySelector('.target-element');
    element.addEventListener('scroll', () => {
        const scrollTop = element.scrollTop;
        const elementHeight = element.scrollHeight - element.clientHeight;
        const scrollProgress = (scrollTop / elementHeight) * 100;
        element.style.setProperty('--element-scroll-progress', scrollProgress + '%');
    });
    ```

2. **Use the Scroll Progress in CSS for the Element:** Define and utilize the custom property for the element's styling.

    ```css
    .target-element {
        --element-scroll-progress: 0%;
        overflow-y: auto;
    }

    .target-element::after {
        content: '';
        width: var(--element-scroll-progress);
        height: 5px;
        background: #000;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
    }
    ```

## Conclusion
By following these simple steps, you can effectively calculate and track the scroll progress of either an entire webpage or any specific element. This technique not only enhances the interactivity of your web designs but also provides a more engaging user experience through dynamic scroll-driven animations.

## Community discussion

Top comments from developers on daily.dev.

**@noricode** · 1 upvotes

> no need to  create a custom property, just  a  variable and update it on the body
> `document.body.style = '--element-scroll-progress:'+ scrollProgress + '%';`

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend)

[View this post on daily.dev](https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"How to Calculate the Scroll Progress of a Webpage or Any Arbitrary Element","url":"https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx"},"datePublished":"2024-07-24T11:26:49.637Z","dateModified":"2024-07-24T11:27:13.958Z","description":"Discover how to calculate the scroll progress of a webpage or any arbitrary element using a few lines of JavaScript and CSS. This technique leverages...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bcb7c35be99e057e1371e0d28ad0d033?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/bcb7c35be99e057e1371e0d28ad0d033?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Collections","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Collections","logo":"https://media.daily.dev/image/upload/s--fk_6ycEi--/f_auto,q_auto/v1780996001/logos/collections?_a=BAMAMiWQ0","url":"https://daily.dev/sources/collections"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":25},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"webdev,javascript,css,frontend","timeRequired":"PT2M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Collections","item":"https://daily.dev/sources/collections"},{"@type":"ListItem","position":3,"name":"How to Calculate the Scroll Progress of a Webpage or Any Arbitrary Element"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-to-calculate-the-scroll-progress-of-a-webpage-or-any-arbitrary-element-wyl5nkttx","comment":[{"@type":"Comment","text":"no need to  create a custom property, just  a  variable and update it on the body\ndocument.body.style = '--element-scroll-progress:'+ scrollProgress + '%';","datePublished":"2024-10-08T23:41:07.274Z","url":"https://daily.dev/posts/wYL5nKtTX#c-lMpH2vwYM","author":{"@type":"Person","name":"noricode","url":"https://daily.dev/noricode","image":"https://media.daily.dev/image/upload/v1672934357/avatars/avatar_v9I0Ty3qOPTDx9IvWetC0.jpg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]}
```