如何修改进度条的Javascript以跟踪水平网站上的滚动

本文介绍了如何修改进度条的Javascript以跟踪水平网站上的滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不确定如何修改Java脚本代码以使进度条跟踪水平滚动.这是一个有问题的水平滚动网站，因此根本不会进行垂直滚动.

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.

非常感谢.

JavaScript，CSS和HTML代码:

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>

推荐答案

将代码转换为水平滚动页面(包括进度条)实际上并不难.

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

通过更改
scrollTop -> scrollLeft，scrollHeight -> scrollWidth，clientHeight -> clientWidth，
您正在跟踪水平滚动而不是垂直滚动.

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/

为防止将页面"推送到新行，您需要设置
.content {white-space:nowrap;}和.content .page {display:inline-block;}.
要更正white-space:nowrap;，您需要设置
.content .page {white-space:normal;}.
为了让您的页面"填满整个视口，您需要设置
html,body {width:100%; height:100%;}，然后将width和/或height设置为100%以用于后续元素(请参见我的代码段).
为了使其正常工作，您还需要设置div {box-sizing:border-box;}.
我添加了body {overflow-y:hidden;}以确保没有垂直滚动条.
我还更改了其他一些内容，这些并不是您的代码正常工作所必需的，而仅仅是我的个人风格.您可以忽略它们，也可以查看是否喜欢它们并在代码中实现它们.

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.

如果您希望能够使用鼠标滚轮(或其他定位设备)进行水平滚动，请在JS中添加以下代码:

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/

这将为 wheel添加事件监听器事件在指点设备上.

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

首先设置滚动速度.此处设置为页面宽度的百分比.
parseInt()将其转换为整数，因为始终按完整像素滚动.
然后将窗口水平滚动speed.
Math.sign(e.deltaY) 将wheel -delta归一化，有效地将其转换为-1/+1 .

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.

这篇关于如何修改进度条的Javascript以跟踪水平网站上的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！