How To Create a Scroll Indicator in Oracle APEX - Javainhand Tutorial

Welcome to Javainhand.com, Today I will describe to you how to create a scroll indicator in oracle apex. Basically, Scroll Indicator is a page progress bar. With the help of the scroll indicator, you can see how much your page scrolled.

Let's Start Our Today Topic

How To Create a Scroll Indicator in Oracle Apex? 

In this section, We will learn how to add a scroll indicator in the oracle apex with a few simple steps.

Step 1:-Firstly we have to create a Zero Page or Global Page because we want to display a Scroll Indicator on every page.if you are a beginner and you don't know How to create Global Page in Oracle APEX then  Click here.

Step 2:-Create a Region in Global Page after that choose Region Type  Static Content and change Layout Position with Breadcrumb. Add the following below  HTML Code in the static content region. See the following screenshot for a better understanding.

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

Step 3:-Now Scroll Down Region Properties and Go to Appearance Section and change the template Blank with attributes(No Grid). See the following screenshot for a better understanding.

Step 4:-Again Scroll down Region Property and Go to Header/Footer Text Section put the below CSS code into your 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:- The last step is to put below Javascript code into your Footer Text.

<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>

Click Here for Watch Oracle APEX Video Tutorials:-

https://www.youtube.com/watch?v=NxnVn0q4XSU&list=PLlVqwKmeoyUkeXQfS9w289bdXxC1Zd5oB&index=19