调整屏幕宽度后重新启动

Skrollr Restarts when Screen Width adjusted

本文关键字：重新启动 屏幕 调整      更新时间：2023-09-26

我的滚动动画工作，除非我在页面的一半的方式和调整屏幕宽度。然后，skrollr动画都重新启动，好像中间现在是顶部。我必须刷新屏幕顶部的页面来修复它，否则动画将不会开始，直到我到达最后一个已知的"顶部"。

下面是我的代码:

<!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>

Try 

$(window).resize(function(){
    var s = skrollr.refresh(); 
});  //close window resize

skrollr.refresh()是一个可行的解决方案，但如果你已经初始化了skrollr并将其分配给一个变量(即var s = skrollr.init();)，那么你需要在变量上调用刷新函数，像这样:

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

如果您动态调整元素高度，您将需要手动触发窗口大小调整事件。例如，如果您正在使用jQuery的幻灯片功能，则需要在动画完成后触发大小调整。这样的:

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

这将触发resize事件，该事件将触发skrollr刷新函数。

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

$('#my-element').slideDown({
    complete: function() {
        s.refresh();
    }
});
相关文章：