滚动条上的垂直进度条

时间：2019-01-31 03:20:11

标签： jquery css

我正在尝试创建一个垂直进度条，该条在用户滚动时从底部开始

我发现了水平进度条https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

的示例

我如何使其垂直运行？

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 + "%";
}

2 个答案:

答案 0 :(得分：1)

从您的示例中对https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_indicator进行了轻微修改，然后添加到.progress-container中：

-webkit-transform-origin: 0 100%;
-webkit-transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);
-moz-transform-origin: 0 100%;
-moz-transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);
-ms-transform-origin: 0 100%;
-ms-transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);
transform-origin: 0 100%;
transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);

将从底部开始将进度条从水平转换为垂直。

rotate(90deg)进行了旋转技巧，scaleX(-1)将位置反向180度，translate(-100%,-50%)固定了反向180度之前的位置。

请参见示例：

// 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;
    -webkit-transform-origin: 0 100%;
    -webkit-transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);
    -moz-transform-origin: 0 100%;
    -moz-transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);
    -ms-transform-origin: 0 100%;
    -ms-transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);
    transform-origin: 0 100%;
    transform: rotate(90deg) scaleX(-1) translate(-100%,-50%);      
}

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

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}
<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>
  <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>
  <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>
  <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>
  <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>

如果要垂直从顶部开始，则不需要使用scaleX(-1)和translate(-100%,-50%) 

// 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;
    -webkit-transform-origin: 0 100%;
    -webkit-transform: rotate(90deg);
    -moz-transform-origin: 0 100%;
    -moz-transform: rotate(90deg);
    -ms-transform-origin: 0 100%;
    -ms-transform: rotate(90deg);
    transform-origin: 0 100%;
    transform: rotate(90deg);      
}

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

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}
<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>
  <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>
  <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>
  <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>
  <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>

根据comment中的说明进行更新：

$(window).scroll(function() {
  var s = $(window).scrollTop(),
    d = $(document).height(),
    c = $(window).height();
  scrollPercent = (s / (d - c)) * 100;
  var position = scrollPercent;

  $("#progressbar").attr('value', position);

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

progress {
  background: #4caf50;
  position: fixed;
  margin-top: -40px;
  width: 50vw;
  overflow: auto;
  -webkit-transform-origin: 0 100%;
  -webkit-transform: rotate(90deg) scaleX(-1) translate(-100%, -50%);
  -moz-transform-origin: 0 100%;
  -moz-transform: rotate(90deg) scaleX(-1) translate(-100%, -50%);
  -ms-transform-origin: 0 100%;
  -ms-transform: rotate(90deg) scaleX(-1) translate(-100%, -50%);
  transform-origin: 0 100%;
  transform: rotate(90deg) scaleX(-1) translate(-100%, -50%);
}

#top {
  height: 1000px;
  background-color: pink;
}


#middle {
  height: 1000px;
  background-color: #add8e6;
}

#centre {
  height: 1000px;
  background-color: #add8e6;
}
#lower {
  height: 1000px;
  background-color: #add8e6;
}

#bottom {
  height: 1000px;
  background-color: #add8e6;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<progress id="progressbar" value="0" max="100"></progress>

<div id="top">
  <h1>top</h1>
</div>

<div id="middle">
  <h1>middle</h1>
</div>

<div id="centre">
  <h1>middle</h1>
</div>

<div id="lower">
  <h1>middle</h1>
</div>
 

<div id="bottom">
  <h1>bottom</h1>
</div>

答案 1 :(得分：0)

您要做的就是将宽度替换为高度：

/* The progress container (grey background) */
.progress-container {
  height: 100%;
  width: 8px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  width: 8px;
  background: #4caf50;
  height: 0%;
}

document.getElementById("myBar").style.height = scrolled + "%";

现在，只需将进度条放在滚动容器旁边即可。

相关问题
最新问题