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

标签 javascript html jquery css

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

我要留下基本的DEMO在这里。

有人可以告诉我，为了让进度条跟踪水平滚动而不是垂直滚动，我需要进行哪些调整。

非常感谢。

Javascript、CSS 和 HTML 代码:

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

最佳答案

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

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

为了让您的页面水平运行，您还需要更改其他一些内容，我将在实时片段后进行解释:

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;}.
  • 为了让您的“页面”填满整个视口(viewport)，您需要设置
    html,body {宽度:100%; height:100%;}，然后将后续元素的 width 和/或 height 设置为 100% (请参阅我的代码片段).
    为了使其正常工作，您还需要设置 div {box-sizing:border-box;}。
  • 我添加了 body {overflow-y:hidden;} 以确保没有垂直滚动条。
  • 我还更改了其他一些内容，这些对于您的代码工作来说并不是必需的，而只是我的个人风格。您可以忽略它们，也可以看看您是否喜欢它们并在代码中实现它们。

更新:

如果您希望能够使用鼠标滚轮(或其他指点设备)水平滚动，请在 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 event 添加一个事件监听器在您的指点设备上。

关于javascript - 如何修改进度条的Javascript以跟踪水平网站上的滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62550184/

上一篇：R:如何将字符串参数转换为变量？

下一篇：javascript - 如何设置传单中的图像偏移？

相关文章：

javascript - 将表格单元格上的点击重定向到其中的 <a>

javascript - jQuery 函数不会在第一次点击时触发

javascript - 数据表标题中的格式问题

javascript - 具有原型(prototype)的 parent 的多重继承

javascript - 程序化解构

Javascript 原型(prototype)语法

html - 动态更改元素 css 属性

html - 防止 CSS 网格中的双边框

c# - 如何在网站中加密第三方api key

javascript - 如何获取 json 的一部分？

©2024 IT工具网  联系我们