How to amend Javascript for Progress bar to track scrolling on a horizontal website

Question

I'm unsure on how to amend java script code to make a progress bar track HORIZONTAL SCROLLING. This is a horizontal scrolling website in question so there will be NO SCROLLING VERTICALLY AT ALL.

I am leaving a basic DEMO here.

Could someone please show me what adjustments I would have to make in order to have the progress bar track horizontal scrolling and not vertical scrolling.

Many thanks.

Javascript, CSS and HTML code:

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

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

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

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

.header h2 {
  text-align: center;
}

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

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

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>
<div class="content">
  <h3>Scroll Down to See The Effect</h3>
  <p>We have created a "progress bar" to <b>show how far a page has been scrolled</b>.</p>
  <p>It also <b>works when you scroll back up</b>.</p>
  <p>It is even <b>responsive</b>! Resize the browser window to see the effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>

I see no vertical scrolling in your example. Your fiddle has nothing to do with your actual question. Where is your vertical scrolling code where the indicator doesn't work on? — Alexandre Elshobokshy, Jun 24 '20 at 07:53
no, this is a speculative question I am asking. My fiddle has a vertical scrolling website. I want to know how I would make the progress bar track horizontal scrolling if I was to set an elements width to 100+ % of viewport. — nedy, Jun 24 '20 at 07:56
My apologies btw, the website in the fiddle isnt the website I have mentioned in my question. The website in the fiddle is just a rough working example I would like someone more knowledgeable to help me on. Thank you. — nedy, Jun 24 '20 at 07:58
I would suggest creating a fiddle with horizontal scrolling, try to make it work, and get back to SO with what you've tried. As the way it looks, you want someone to code the whole thing for you. — Alexandre Elshobokshy, Jun 24 '20 at 08:02
Okay one second I will try use the code I have as simply as possible — nedy, Jun 24 '20 at 08:09
I'm back. heres a link to the fiddle: http://jsfiddle.net/tjfdsmoL/ — nedy, Jun 24 '20 at 08:42
NOTE: the horizontal scrollbar isnt visible but you can navigate right to the following page using the arrow keys. Just to clarify, my question is how to use a progress bar to track you as move from page to page. — nedy, Jun 24 '20 at 08:44

myfunkyside · Accepted Answer · 2020-06-26T23:18:40.250

It's actually not that difficult to convert your code into a horizontal scrolling page, including progress bar.

By changing
scrollTop -> scrollLeft, scrollHeight -> scrollWidth, clientHeight -> clientWidth,
you're tracking horizontal scrolling instead of vertical.

In order to get your page working horizontally, you need to change a few other things as well, I'll explain after the live snippet:

window.onscroll = function() {
  var scroll = document.body.scrollLeft || document.documentElement.scrollLeft;
  var total = document.documentElement.scrollWidth - document.documentElement.clientWidth;
  document.getElementById("progressBar").style.width = ((scroll/total)*100) + "%";
};

html,body {width:100%; height:100%; margin:0;}

body {
  font-size: 28px;
  font-family: Helvetica, sans-serif;
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;
}

div {box-sizing:border-box;}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
}
.header .progress {
  width: 100%;
  height: 100%;
  background: #ccc;
}
.header .progress .bar {
  width: 0%;
  height: 100%;
  background: #4caf50;
}

.content {
  width: 100%;
  height: calc(100% - 8px);
  margin-top: 8px;
  padding: 10px 0;
  white-space: nowrap;
}
.content .page {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: solid 5px #c77;
  background: #ddd;
  text-align: center;
  white-space: normal;
}

<div class="header">
  <div class="progress">
    <div class="bar" id="progressBar"></div>
  </div>  
</div>

<div class="content">
  <div class="page"><b>Page 1</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 2</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 3</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 4</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 5</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 6</b><br>Bladieblabie blablabla blabladie bla</div>
</div>

jsfiddle: https://jsfiddle.net/vpwyna64/2/

To prevent your 'pages' from being pushed to a new line, you need to set
.content {white-space:nowrap;}, and .content .page {display:inline-block;}.
To correct for the white-space:nowrap;, you need to set
.content .page {white-space:normal;}.
In order to let your 'pages' fill out the entire viewport, you need to set
html,body {width:100%; height:100%;}, and then set width and/or height to 100% for subsequent elements (see my snippet).
In order for that to work correctly, you also need to set div {box-sizing:border-box;}.
I added body {overflow-y:hidden;} to be sure there is no vertical scrollbar.
I changed a few other things as well, those are not necessary for your code to work, but are just my personal style. You can either ignore them or see if you like them and implement them in your code.

UPDATE:

If you want to be able to use the mouse wheel (or other pointing device) to scroll horizontally, add the following code to your JS:

window.onwheel = function(e) {
  var speed = parseInt(document.documentElement.clientWidth/5);
  window.scrollBy(Math.sign(e.deltaY)*speed,0);
};

window.onscroll = function() {
  var scroll = document.body.scrollLeft || document.documentElement.scrollLeft;
  var total = document.documentElement.scrollWidth - document.documentElement.clientWidth;
  document.getElementById("progressBar").style.width = ((scroll/total)*100) + "%";
};

window.onwheel = function(e) {
  var speed = parseInt(document.documentElement.clientWidth/5);
  window.scrollBy(Math.sign(e.deltaY)*speed,0);
};

html,body {width:100%; height:100%; margin:0;}

body {
  font-size: 28px;
  font-family: Helvetica, sans-serif;
  overflow: scroll;
  overflow-x: scroll;
  overflow-y: hidden;
}

div {box-sizing:border-box;}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
}
.header .progress {
  width: 100%;
  height: 100%;
  background: #ccc;
}
.header .progress .bar {
  width: 0%;
  height: 100%;
  background: #4caf50;
}

.content {
  width: 100%;
  height: calc(100% - 8px);
  margin-top: 8px;
  padding: 10px 0;
  white-space: nowrap;
}
.content .page {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: solid 5px #c77;
  background: #ddd;
  text-align: center;
  white-space: normal;
}

<div class="header">
  <div class="progress">
    <div class="bar" id="progressBar"></div>
  </div>  
</div>

<div class="content">
  <div class="page"><b>Page 1</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 2</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 3</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 4</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 5</b><br>Bladieblabie blablabla blabladie bla</div>
  <div class="page"><b>Page 6</b><br>Bladieblabie blablabla blabladie bla</div>
</div>

jsfiddle: https://jsfiddle.net/57wgmsr0/2/

This adds an event-listener for the wheel event on your pointing device.

First set the scroll-speed. Here it is set as a percentage of the page's width.
parseInt() converts it to an integer, since scrolling is always done per full pixel.
Then horizontally scroll the window by the amount of speed.
Math.sign(e.deltaY) normalizes the wheel-delta, effectively converting it to -1/+1.

wow thank you! that is really helpful, could ask, how would i be able to add mouse-wheel event to enable mouse wheel scrolling? — nedy, Jun 26 '20 at 18:40

How to amend Javascript for Progress bar to track scrolling on a horizontal website

1 Answers1

UPDATE:

Linked