Progress bar indicating how far users have scrolled within a specific element

Question

Progress bar indicating how far users have scrolled within a specific element

I'm currently working on implementing a scroll progress indicator for a div element. While the indicator is functional, it seems to only respond to window scrolls and ignores any overflow scrolling within the div.

function handleScroll() {
  var winScroll = document.getElementById("info").scrollTop;
  var height = document.getElementById("info").scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

window.onscroll = function() {
  handleScroll()
};

.header {
  position: fixed;
  top: auto;
  z-index: 1;
  width: 83.5%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

<div name="header" class="header">
  <div name="progress-container" class="progress-container">
    <div name="myBar" class="progress-bar" id="myBar"></div>
  </div>
</div>

It appears that my implementation may have an issue or perhaps I need to replace window.onscroll with an alternative method. Ideally, I'd like to avoid using jQuery for this. Any suggestions?

javascript html css scroll scrollbar

Answer 1

Answer №1

The issue arises from setting onscroll to window instead of

document.getElementById("info")

. Take a look at the revised example below:

function myFunction() {
    const winScroll = document.getElementById("info").scrollTop;
    const height = document.getElementById("info").scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = scrolled + "%";
  }

 document.getElementById("info").onscroll = function() {myFunction()};

.header {
  position: fixed;
  top: auto;
  z-index: 1;
  width: 83.5%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

#info {
  width: 256px;
  height: 256px;
  overflow-y: auto;
  background-color: red;
}

<div name="header" class="header">
    <div name="progress-container" class="progress-container">
        <div name="myBar" class="progress-bar" id="myBar"></div>
    </div>
</div>

<div id="info">
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  ...
  <p>SOME TEXT</p>
</div>

Answer 2

The issue arises from setting onscroll to window instead of

document.getElementById("info")

. Take a look at the revised example below:

function myFunction() {
    const winScroll = document.getElementById("info").scrollTop;
    const height = document.getElementById("info").scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = scrolled + "%";
  }

 document.getElementById("info").onscroll = function() {myFunction()};

.header {
  position: fixed;
  top: auto;
  z-index: 1;
  width: 83.5%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

#info {
  width: 256px;
  height: 256px;
  overflow-y: auto;
  background-color: red;
}

<div name="header" class="header">
    <div name="progress-container" class="progress-container">
        <div name="myBar" class="progress-bar" id="myBar"></div>
    </div>
</div>

<div id="info">
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  ...
  <p>SOME TEXT</p>
</div>

Progress bar indicating how far users have scrolled within a specific element

Answer №1

Similar questions

Guide to illustrating the connections between origin and destination nations utilizing IP addresses

Having trouble accessing the menu in the dropdown div when clicking back?

What is the best way to transfer a JavaScript object with string values containing quotes from node.js to the browser?

A straightforward method of transmitting data from JavaScript to the Python back-end within a Streamlit application

Transform your traditional sidebar into a sleek icon sidebar with Semantic UI

Tips for creating a responsive text in a label using Tailwind CSS

Using the same Angular component with varying input values

Removing a particular value from a cookie using jquery

Fetch image from database using Ajax when image name is clicked in CodeIgniter

Spotlight the content of the file obtained from GitHub

Introducing the latest feature in Vue.js 3.2: script setup with dynamic $

The problem with utilizing the Node `util.inherits` method

AJAX request stops functioning once the page is reloaded

Guide on incorporating a displacement map into a vertex shader in ThreeJS

Class-validator does not have any associated metadata

How can we identify context menu events triggered by touch actions?

Creating a Progress Bar in Javascript to Compare Three Percentage Values

Using only CSS to style a blockquote

Exploring ways to display dynamic content within AngularJs Tabs

Adding over 20,000 rows to a table can be time-consuming, causing the page to become unresponsive once the process is complete