Question

当我强制刷新中间部分的页面时，然后paroller js transform: translateY(); CSS无法在div <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical">上正常工作，此后，当我滚动它时，它的工作正常。这在第一次硬刷新上应该可以正常工作...当我们对页面进行简单刷新时，这也可以正常工作，但是当我们看到页面中间然后进行硬刷新Ctrl+F5 transform: translateY(); CSS不能正常工作时。

源网址：https://tgomilar.github.io/paroller.js/

源演示网址：https://www.jquery-az.com/jquery/demo.php?ex=145.0_2

硬刷新后，此不正确的CSS添加了：（在页面中间，没有滚动）

transform: translateY(318px);

滚动后：（适用正确的CSS）： transform: translateY(-16px);

这是我的下面的代码

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div style="height:400px;"></div>
    <div class="row">
    <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical">
      <div class="card">
          <img class="card-img-top" src="https://lorempixel.com/400/200/abstract/3" alt="Card image cap">
          <div class="card-block">
              <h4 class="card-title">Card vertical</h4>
              <p class="card-text">
                  <code>data-paroller-factor="0.4" data-paroller-type="foreground"
                      data-paroller-direction="vertical"</code>
              </p>
          </div>
      </div>
  </div>
  <div class="col col-6">
      <div class="card">
          <img class="card-img-top" src="https://lorempixel.com/400/200/abstract/3" alt="Card image cap">
          <div class="card-block">
              <h4 class="card-title">Card vertical</h4>
              <p class="card-text">
                  <code></code>
              </p>
          </div>
      </div>
  </div>
</div>
  <div style="height:400px;"></div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://www.jquery-az.com/jquery/js/paroller/jquery.paroller.js"></script>
    <script>
    $('[data-paroller-factor]').paroller();
    $(function () {
       $(window).paroller();
    });


$( document ).ready(function() {
  $('.paroller').paroller({
  factor: 0.4,
  type: 'foreground'
});
    });
    </script>
  </body>
</html>

Answer 1

我找到了最好的解决方案：将最新的js文件用于"jquery.paroller.min.js"

Download js和Replace：

https://github.com/tgomilar/paroller.js/releases/tag/v1.4.6

paroller.js在首次加载页面时效果不佳

1 个答案: