paroller.js在首次加载页面时效果不佳
[英]paroller.js not working good on first load of page
问题描述
When I hard refresh the page in middle section, then paroller js transform: translateY(); 
当我在中间部分硬刷新页面时，则进行paroller js transform: translateY(); css not working properly on div <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical"> , after that when i scroll this its working fine.. I want that this should be work fine on first hard refresh... when We wo simple refresh of page this also woke fine, but when we see middle of page then do hard refresh Ctrl+F5 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 not working properly. CSS无法正常工作。
Source url: https://tgomilar.github.io/paroller.js/ 源URL： https : //tgomilar.github.io/paroller.js/
Source demo url: https://www.jquery-az.com/jquery/demo.php?ex=145.0_2 源演示URL： https : //www.jquery-az.com/jquery/demo.php? ex =145.0_2
After hard refresh this incorrect css added: (On middle of the page, without scroll) 硬刷新后，此不正确的CSS添加了：（在页面中间，无滚动）
transform: translateY(318px);
After scroll: (Correct css apply): transform: translateY(-16px); 滚动后：（应用正确的CSS）： transform: translateY(-16px);
Here is my below code 这是我的下面的代码
<!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>
1 个解决方案
解决方案1
0 已采纳 2019-02-18 09:24:01
I found solution which is best: Use latest file of js for "jquery.paroller.min.js" 我找到了最好的解决方案：将js的最新文件用于"jquery.paroller.min.js"
Download js and Replace this: Download js并Replace ：
https://github.com/tgomilar/paroller.js/releases/tag/v1.4.6
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.