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>

Answer 1

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%;} 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 .

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

Question

1 answers

solution1
3 ACCPTED 2020-06-26 08:37:37

UPDATE:

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

Question

1 answers

solution1 3 ACCPTED 2020-06-26 08:37:37

UPDATE:

solution1
3 ACCPTED 2020-06-26 08:37:37