How To Create Scroll Indicator in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial, We are going to see How to Create Scroll Indicator in Oracle APEX.

What is Scroll Indicator?

Scroll Indicator is page progress bar which indicates current page scrolling position. In this Section, We are adding horizontal scrollbar indicator in my application page.

Now I am sharing few steps which will help to adding scrollbar indicator using JavaScript.

How To Create Scrollbar Indicator in Oracle APEX? 

We want to display scrollbar indicator in all page. As we already know that if we want to add any component which will display in all the page then that component is added on Global Page. If you are new in the Oracle APEX then click here to learn about the Global Page in Oracle APEX then you proceed in this blog post.

Step 1:-We have to create Global Page because we want to display a Scroll Indicator on every page.

Step 2:- After adding the Global Page, Now create a simple region with static type content and change region layout position to breadcrumbs. Add the following  HTML code in the static content region and See the following screenshot for the better understanding.

<div class="progressContainer">
<div id="progress" class="progress">
</div>
</div>

Step 3:- Scroll down the region properties and find Appearance Section then change the template to Blank with attributes(No Grid). See the following screenshot for a better understanding.

Step 4:-Again Scroll down Region Property and find Header/Footer Text Section put the following CSS code to Header Text Section.

<style>
 .placeholder{
  padding: 3em;
}
.progressContainer{
   bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: gray;
}
.progress{
  height: 4px;
  background: red;
  width: 0;
  transition: width 0.5s;
}
</style>

Step 5:- After the adding the CSS Code, The following javaScript code to Footer Text Section.

<script>
   function updateProgress(num1, num2){
  var percent = Math.ceil( num1 / num2 * 100 ) + '%';
  document.getElementById('progress').style.width = percent;
}

window.addEventListener('scroll', function(){
  var top = window.scrollY;
  var height = document.body.getBoundingClientRect().height - window.innerHeight;
  updateProgress(top, height);
});
</script>

That's all for today, I hope(How to create scroll indicator in Oracle APEX) post will helpful for you. If you like the post then comment in the comment box and also share this post with others Oracle APEX developer.

If you are facing any problem then you can watch video to Scroll indicator in Oracle APEX topic.