Question

我的滚动动画有效，除非我在页面的一半处调整并调整屏幕宽度。然后skrollr动画全部重新启动，好像中间现在是顶部。我必须刷新屏幕顶部的页面来修复它，否则动画将一直开始，直到我击中最后一个已知的＆＃34;顶部＆＃34;。

这是我的代码：

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<title>Template</title>



<link rel="stylesheet" href="../CSS/Services/Services.css">
<link rel="stylesheet" href="../CSS/ParentHF.css">









 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery- mousewheel/3.0.6/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="../js/jquery.simplr.smoothscroll.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">


$(function () {
  $.srSmoothscroll()
})
</script>
<!-- TemplateEndEditable -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>

<body>

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.touchSwipe.min.js"></script>








   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">     </script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="../js/enquire.min.js"></script>
    <script src="../js/skrollr.js"></script>
    <script src="../js/_main.js"></script>


    <script type="text/javascript">   
// disable skrollr if using handheld device
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera   Mini/i.test(navigator.userAgent) ) {
    skrollr.init().destroy();
}//execute function
    </script>





      <script type="text/javascript">      
    $(window).load(function() {
$(".loader-wrap").fadeOut("slow");
 })
 </script>




    <script>
$(window).load(function(){

var s = skrollr.init(); 

});  //closes window load function
 </script>






</body>


</html>

Answer 1

尝试

$(window).resize(function(){

    var s = skrollr.refresh(); 

});  //close window resize

Answer 2

skrollr.refresh() 是一个可行的解决方案，但如果您已经初始化 skrollr 并将其分配给一个变量（即 var s = skrollr.init();），那么您需要改为调用该变量的刷新函数，如下所示：

$(window).on('resize', function(){
    s.refresh();
});

如果您正在动态调整元素高度，则需要手动触发窗口大小调整事件。例如，如果您使用 jQuery's slide 功能，则需要在动画完成后触发调整大小。像这样：

$('#my-element').slideDown({
    complete: function() {
        $(window).trigger('resize');
    }
});

这会触发resize事件，进而触发skrollr刷新功能。

或者，您也可以在 slideDown 函数之后直接调用刷新函数，或者您正在使用的任何用于调整页面高度的函数，如下所示：

$('#my-element').slideDown({
    complete: function() {
        s.refresh();
    }
});

Skrollr在调整屏幕宽度时重新启动

2 个答案: