jQuery垂直滚动进度条填充方向修正问题求助

解决垂直进度条从上到下填充的问题 #

我明白你的问题了——当前垂直进度条是从底部往上填充，但你想要它随着页面向下滚动，从上到下逐步“填满”。问题出在你对<progress>标签的旋转处理上，导致填充方向反转了。这里有两种解决方案，你可以根据需求选择：

方案一：修改现有<progress>标签的实现 #

原来的rotate(-90deg)让进度条的默认左→右填充方向变成了下→上。我们只需添加一个垂直翻转的样式，就能把填充方向改回上→下：

修改后的CSS

progress {
  position: fixed;
  top: 15px;
}
.vertical {
  margin-top: 200px;
  display: inline-block;
  width: 20%;
  height: 40px;
  /* 旋转后垂直翻转，修正填充方向 */
  transform: rotate(-90deg) scaleY(-1);
}

保持原JS逻辑不变

$(window).scroll(function() { 
  var s = $(window).scrollTop(), 
      d = $(document).height(), 
      c = $(window).height(); 
  scrollPercent = (s / (d - c)) * 100; 
  $("#progressbar").attr('value', scrollPercent); 
}); 

原理：scaleY(-1)会垂直翻转进度条，原来的底部填充起点会变成顶部，完美匹配你要的“从上到下滴落”效果。

方案二：用div模拟进度条（更灵活可控） #

如果觉得<progress>标签的样式限制较多，用div自定义进度条会更自由，还能轻松调整颜色、圆角、过渡动画等：

修改后的HTML

<div class="container mt-5"> 
<div class="row"> 
<div class="col-2"> 
  <!-- 替换原生progress为自定义div进度条 -->
  <div class="vertical-progress-container">
    <div class="vertical-progress-bar" id="progressbar"></div>
  </div>
</div> 
<div class="col-10"> 
<p class="card-text"> 
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga obcaecati iusto, commodi hic doloremque cumque consequatur! Iste, quaerat. Officiis voluptas modi cupiditate similique quos obcaecati exercitationem saepe. Neque, molestias voluptatum. Nobis illo commodi temporibus hic soluta quas odit aperiam dicta mollitia? Dolor neque similique delectus tenetur, officiis id consequatur molestias quaerat! Iste aspernatur laborum animi rem molestiae possimus eligendi laudantium! Tempore asperiores repellendus dolore corrupti, deleniti, aperiam culpa vitae repellat, hic quaerat cum facilis laborum! Dignissimos sapiente temporibus quas beatae natus placeat error dolor, praesentium assumenda voluptatum adipisci blanditiis reprehenderit. Pariatur ipsum eum molestiae non. Nisi a id voluptas? Iste, ad cum autem amet magni aut quidem neque laboriosam, cumque quaerat itaque necessitatibus velit dolores architecto optio reiciendis pariatur animi. Doloremque nemo quia cupiditate asperiores obcaecati, nobis iure labore in deleniti perspiciatis necessitatibus accusamus ad cum provident libero. Repellendus et suscipit quaerat pariatur sed corporis dolores laborum voluptate odit ullam! Cum, quis voluptatum obcaecati quibusdam illum dolores dolor nihil velit, officia nisi, harum est perferendis impedit laudantium optio. Hic ipsam dolorem eos sit assumenda veritatis quia quis accusamus molestiae soluta? Deserunt, beatae placeat! Quidem porro ipsam aspernatur facere tempore incidunt nisi consequatur veritatis, tempora laborum a est asperiores adipisci. Asperiores eius sapiente quisquam, vero voluptatibus quae fugiat dicta maxime natus. Excepturi commodi quidem magnam ullam repudiandae, sapiente nesciunt iste veritatis iure ea velit facere pariatur voluptas tempora assumenda! Magni provident voluptates quam voluptatem vel fugit illum eius nam praesentium accusamus! Suscipit reiciendis atque magnam. Laudantium exercitationem suscipit facilis nemo tempora consectetur facere ipsam quo, incidunt voluptatibus est earum atque culpa nobis modi voluptatum vero nulla sed impedit error! Cum, dolores! Molestias vitae velit, nam amet magni eveniet et minus odio accusamus nulla nisi vel unde similique voluptatem consectetur laborum enim magnam mollitia aspernatur? Ab eligendi soluta accusantium, laboriosam numquam nam? 
</p> 
<p class="card-text"> 
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro velit, ullam sequi expedita neque tenetur aspernatur quisquam explicabo placeat, facilis eos inventore mollitia in iure dicta id sint hic perferendis. Reprehenderit fugit distinctio consequatur quibusdam. Rerum perspiciatis natus ad, necessitatibus beatae minus nemo molestias sit, corporis quo dolor magnam sed totam dicta eveniet aperiam quia voluptas labore voluptatem quibusdam soluta? Porro dicta distinctio odio maxime tempora! Illum repudiandae, quod eum obcaecati quae voluptates tempore ea ullam, earum assumenda, rem veniam amet beatae ratione magnam fugiat sapiente asperiores recusandae facere quos. Enim, est dolorum! Repellat perspiciatis explicabo ducimus quo iste vel, deserunt quia eaque, dignissimos corrupti, in non eveniet minima voluptates delectus temporibus rem libero ad excepturi sunt accusamus unde ipsam. Laboriosam blanditiis dolor voluptatum tenetur. Quae maiores dignissimos molestias dolore beatae fugiat veniam mollitia eius illo enim nesciunt est qui possimus cupiditate laboriosam, rerum minima. Sequi dolorem eius aliquam quia. Magnam eos quas molestiae unde beatae consequuntur maiores itaque aperiam, totam labore quidem dicta sunt pariatur inventore recusandae ea! Eius eaque molestiae sunt, hic sed possimus? Tenetur commodi laborum necessitatibus. Unde debitis harum facere ab at! Quod accusantium explicabo, atque laboriosam rerum voluptatum. Tempore iusto distinctio hic est a, mollitia ad explicabo. Veritatis, commodi! Corporis sint provident natus impedit nihil! Porro labore voluptates veniam ducimus! Culpa sint eos distinctio itaque tenetur esse expedita libero at dolorem assumenda vero molestiae repellat, provident laboriosam tempore, earum placeat perferendis consequatur praesentium. Repellendus, laboriosam? Repellat, expedita sequi. Doloribus quod, magnam consequatur, numquam vel omnis iure doloremque obcaecati deleniti ullam adipisci perspiciatis aliquam, ratione distinctio non expedita aperiam? A, saepe! Itaque nam at recusandae doloremque? Ipsa et aut dicta, obcaecati eligendi, tempore soluta aspernatur culpa hic sed, rem a voluptatum assumenda unde illum perspiciatis velit reprehenderit ratione distinctio mollitia. Eligendi, assumenda iusto. Reiciendis, accusamus quam. 
</p> 
</div> 
</div> 
</div>

自定义CSS样式

.vertical-progress-container {
  position: fixed;
  top: 215px; /* 原top15px + margin-top200px，保持和原布局一致 */
  width: 20px; /* 进度条宽度，可自定义 */
  height: 200px; /* 进度条高度，对应原20%宽度的视觉长度 */
  background-color: #e0e0e0; /* 进度条背景色 */
  border-radius: 10px;
  overflow: hidden;
}

.vertical-progress-bar {
  width: 100%;
  height: 0%;
  background-color: #4caf50; /* 进度条填充色 */
  transition: height 0.1s ease; /* 平滑过渡动画 */
}

调整后的JS逻辑

$(window).scroll(function() { 
  var s = $(window).scrollTop(), 
      d = $(document).height(), 
      c = $(window).height(); 
  scrollPercent = (s / (d - c)) * 100; 
  // 直接设置高度百分比，天然实现从上到下填充
  $("#progressbar").css('height', scrollPercent + '%'); 
}); 

优势：完全摆脱原生<progress>的样式限制，你可以根据设计需求自由调整进度条的外观，填充方向逻辑也更直观。

内容的提问来源于stack exchange，提问作者J.G.Sable