javascript - 速度滚动动画 jQuery

Question

我为我的网站编写了这段代码:

我希望背景消失并显示其背后的内容，所以我这样做:

var px = 0;

$(window).bind('mousewheel DOMMouseScroll', function(event){
   if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
          console.log('scrolling up !');
      } else {
        px += 1;
        $('.bg').animate({ top: -px }, 1);
      }
  });

body {
  margin: 0;
  padding: 0;
}
.main-content {
    height: 100vh;
    overflow: hidden;
}
.bg {
      width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
  <div class="bg"></div>
<div class="content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate perferendis laudantium natus repellendus non, ea ipsam aut, fugit, quae aliquam ipsum optio ad libero quia exercitationem expedita explicabo harum.
  Distinctio obcaecati, nulla voluptas quasi autem nesciunt quae voluptatum beatae, excepturi error quibusdam porro reprehenderit ut atque esse sapiente aperiam commodi suscipit laborum! Eum ad optio atque, doloremque a vero!
  Facere debitis, labore excepturi eaque dolore, eius pariatur nisi saepe possimus fugiat consectetur omnis eligendi eum, eveniet deleniti officiis? Harum alias quis iste nisi in velit quo ab ipsam error!
  Corporis quae at vitae iste ut, beatae eligendi vel, voluptatum dicta natus nisi quia! Adipisci minus, atque quis at saepe aut reprehenderit beatae sed asperiores sit voluptate, ipsum, molestias voluptas?
  Nobis, eos deleniti, saepe cumque veniam repellendus deserunt, laboriosam atque minima quia voluptates provident ad eligendi eius fugit magnam excepturi error dolorum temporibus consequatur? Quibusdam dolorem asperiores non quasi officiis.
  Fugiat explicabo illo, blanditiis odit nesciunt corporis, vitae minima sit possimus repellat itaque nam ut iste laborum accusantium sed et harum iure architecto fugit ipsa adipisci facere enim. Accusantium, magni.
  Deserunt neque blanditiis quisquam, quae cum asperiores numquam dolor inventore aliquam nisi? Atque numquam, magni ex voluptatem a, id pariatur, eligendi quam ipsum repellat velit cum corrupti fugiat. Eos, placeat!
  Eveniet eum tempore quas culpa dolor doloremque iure distinctio debitis, labore ullam. Adipisci fugit recusandae molestias repellat eum nihil? Sapiente praesentium doloribus soluta ex animi debitis repellat natus placeat aliquam!
  Earum eum quaerat tempora velit fugit, modi nostrum cupiditate facere ab asperiores ipsum placeat similique eligendi perferendis. Consequuntur nihil, odit maxime pariatur, doloribus nam dolorem ducimus suscipit ipsa repudiandae quas?
  Dolores quaerat amet iure ipsa, illum deleniti eum voluptate esse distinctio commodi odit. Facilis nulla consequatur eligendi adipisci, inventore obcaecati minus sed beatae, magnam neque praesentium, placeat ullam reprehenderit ex.
  Doloribus reiciendis enim magni officia inventore repellat, provident distinctio dolores deserunt id obcaecati similique harum quaerat at vero sunt unde eligendi earum vitae cupiditate reprehenderit. Facilis expedita suscipit corporis officia.
  Quod, nisi laudantium. A esse, accusamus voluptas, facere nobis quia deserunt blanditiis omnis delectus consequuntur debitis reprehenderit ut ex quos dolores autem iure similique accusantium repellendus itaque nulla sint porro.
  Quaerat dolorem amet pariatur dignissimos illo consectetur fugit tempore officiis dolor incidunt. Dignissimos, quaerat? Minima hic, ducimus dolores ea sit voluptates. Maxime voluptate numquam voluptatum ullam quas ipsam, alias cum?
  Molestias, eum veritatis! Dolores, suscipit amet architecto dicta non ut culpa blanditiis voluptatibus? Quae maxime minus assumenda ratione facere rem. Magnam aliquid repellat amet distinctio labore illum error dolore officia.
  Saepe inventore, expedita tenetur explicabo quo, libero vitae hic maxime, magni illo beatae aliquam ut consequuntur repellat? Blanditiis, minus impedit laudantium aspernatur nisi consequatur asperiores debitis, cupiditate deserunt perspiciatis sequi!
  Eligendi odit assumenda ullam dolor amet odio commodi dicta corporis nam unde, quia dolorem asperiores suscipit nihil, facere officia eum eius ipsam? Consectetur eligendi vel reiciendis autem quibusdam facere saepe?
</div>
</div>

我想要的是加快top属性的滚动速度，1s对我来说太低了。

我试图将延迟设置为 0.01，但它确实没有任何影响..

感谢您的帮助!

Answer 1

你想这样加速吗？

增加滚动量和间隔。

var px = 0;

$(window).bind('mousewheel DOMMouseScroll', function(event){
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {

  } else {
    px += 1000;
    $('.bg').animate({ top: -px }, 1000);
  }
});

body {
  margin: 0;
  padding: 0;
}
.main-content {
    height: 100vh;
    overflow: hidden;
}
.bg {
      width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
  <div class="bg"></div>
<div class="content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate perferendis laudantium natus repellendus non, ea ipsam aut, fugit, quae aliquam ipsum optio ad libero quia exercitationem expedita explicabo harum.
  Distinctio obcaecati, nulla voluptas quasi autem nesciunt quae voluptatum beatae, excepturi error quibusdam porro reprehenderit ut atque esse sapiente aperiam commodi suscipit laborum! Eum ad optio atque, doloremque a vero!
  Facere debitis, labore excepturi eaque dolore, eius pariatur nisi saepe possimus fugiat consectetur omnis eligendi eum, eveniet deleniti officiis? Harum alias quis iste nisi in velit quo ab ipsam error!
  Corporis quae at vitae iste ut, beatae eligendi vel, voluptatum dicta natus nisi quia! Adipisci minus, atque quis at saepe aut reprehenderit beatae sed asperiores sit voluptate, ipsum, molestias voluptas?
  Nobis, eos deleniti, saepe cumque veniam repellendus deserunt, laboriosam atque minima quia voluptates provident ad eligendi eius fugit magnam excepturi error dolorum temporibus consequatur? Quibusdam dolorem asperiores non quasi officiis.
  Fugiat explicabo illo, blanditiis odit nesciunt corporis, vitae minima sit possimus repellat itaque nam ut iste laborum accusantium sed et harum iure architecto fugit ipsa adipisci facere enim. Accusantium, magni.
  Deserunt neque blanditiis quisquam, quae cum asperiores numquam dolor inventore aliquam nisi? Atque numquam, magni ex voluptatem a, id pariatur, eligendi quam ipsum repellat velit cum corrupti fugiat. Eos, placeat!
  Eveniet eum tempore quas culpa dolor doloremque iure distinctio debitis, labore ullam. Adipisci fugit recusandae molestias repellat eum nihil? Sapiente praesentium doloribus soluta ex animi debitis repellat natus placeat aliquam!
  Earum eum quaerat tempora velit fugit, modi nostrum cupiditate facere ab asperiores ipsum placeat similique eligendi perferendis. Consequuntur nihil, odit maxime pariatur, doloribus nam dolorem ducimus suscipit ipsa repudiandae quas?
  Dolores quaerat amet iure ipsa, illum deleniti eum voluptate esse distinctio commodi odit. Facilis nulla consequatur eligendi adipisci, inventore obcaecati minus sed beatae, magnam neque praesentium, placeat ullam reprehenderit ex.
  Doloribus reiciendis enim magni officia inventore repellat, provident distinctio dolores deserunt id obcaecati similique harum quaerat at vero sunt unde eligendi earum vitae cupiditate reprehenderit. Facilis expedita suscipit corporis officia.
  Quod, nisi laudantium. A esse, accusamus voluptas, facere nobis quia deserunt blanditiis omnis delectus consequuntur debitis reprehenderit ut ex quos dolores autem iure similique accusantium repellendus itaque nulla sint porro.
  Quaerat dolorem amet pariatur dignissimos illo consectetur fugit tempore officiis dolor incidunt. Dignissimos, quaerat? Minima hic, ducimus dolores ea sit voluptates. Maxime voluptate numquam voluptatum ullam quas ipsam, alias cum?
  Molestias, eum veritatis! Dolores, suscipit amet architecto dicta non ut culpa blanditiis voluptatibus? Quae maxime minus assumenda ratione facere rem. Magnam aliquid repellat amet distinctio labore illum error dolore officia.
  Saepe inventore, expedita tenetur explicabo quo, libero vitae hic maxime, magni illo beatae aliquam ut consequuntur repellat? Blanditiis, minus impedit laudantium aspernatur nisi consequatur asperiores debitis, cupiditate deserunt perspiciatis sequi!
  Eligendi odit assumenda ullam dolor amet odio commodi dicta corporis nam unde, quia dolorem asperiores suscipit nihil, facere officia eum eius ipsam? Consectetur eligendi vel reiciendis autem quibusdam facere saepe?
</div>
</div>