javascript - jQuery 中的 ScrollTop/Scr​​ollBottom 问题

Question

我正在尝试测试 jquery 中的一个函数，其中一些文本旁边有一个垂直进度条。理想的功能是进度条的值随着用户向下滚动而填充。除了进度条从底部到顶部填充外，我已经让它完美地工作了。我希望它从上到下填充，所以颜色会沿着进度条滴下来。

有人可以帮忙吗？这是我的代码。

$(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);

});

progress {
  position: fixed;
  top: 15px;
}

.vertical {
  margin-top: 200px;
  display: inline-block;
  width: 20%;
  height: 40px;
  -webkit-transform: rotate(-90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mt-5">
  <div class="row">
    <div class="col-2">
      <progress class="vertical" id="progressbar" value="0" max="100"></progress>
    </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>

Answer 1

使用transform: rotate(90deg)代替transform: rotate(-90deg)

rotate(-90deg)将进度条逆时针旋转

0到180是顺时针，0到-180是逆时针。因此，正数顺时针旋转，负数顺时针旋转。

More help on rotate()

$(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);

});

progress {
  position: fixed;
  top: 15px;
}

.vertical {
  margin-top: 200px;
  display: inline-block;
  width: 20%;
  height: 40px;
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mt-5">
  <div class="row">
    <div class="col-2">
      <progress class="vertical" id="progressbar" value="0" max="100"></progress>
    </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>