javascript - jQuery.ScrollTo 和滚动事件无法正常工作

Question

我还没有找到这个问题的任何解决方案，所以我再次询问，这是上一个问题链接:jQuery.ScrollTo onAfter settings isn't working correctly

我使用 jQuery.ScrollTo 脚本能够垂直滚动到所选图像或下一个图像。 (这取决于“演示”类是否附加到我的图像容器)

为此，我创建了两种状态:“演示模式”和“无演示模式”。

当我们单击图像时，我通过将全局类“presentation”添加到我的容器“#galleries”来激活演示模式。通过此类“打开”，我可以确定是否必须显示当前图像或滚动到下一张图像。

为了完全关闭演示模式，我编写了“$(window).scroll”函数。当用户在页面内滚动时，此函数将退出演示模式。

问题:当我在演示模式下使用 .scrollTo 事件时，由于“$(window).scroll”函数，我总是退出“演示”模式。因此，我使用全局变量“presentation_mode_stop_scrolling”来停止它，但这不起作用

这是我的问题:在图片上单击事件后，有时，我的类“演示文稿”被我的 $(window).scroll 函数删除，有什么想法吗？？？

这是演示:http://jsfiddle.net/qnQSP/12/

这是我的代码:

<div id="galleries">
    <div id="pictures-content" class="1"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div>
    <div id="pictures-content" class="2"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div>
    <div id="pictures-content" class="3"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div>
    <div id="pictures-content" class="4"><img src="http://www.webdesign4essex.co.uk/images/essex_website_design.jpg"></div>
    <div id="pictures-content" class="5"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div>
</div>

我的脚本

presentation_mode_stop_scrolling = "off";

// Calling functions
$(document).ready(function(){ 


// ADD THE POST ANIMATION ON PICTURE TO CENTER IT IN THE MIDDLE OF THE SCREEN

    var picture_to_center_class = "";   
    var picture_to_center = "";

    $("#galleries #pictures-content").unbind("click");
    $("#galleries #pictures-content").bind("click", function(event) {

        // Check if we are in the presentation mode
        var class_galleries = $("#galleries").attr('class');
        if(class_galleries == "picture_presentation")
        {
        // WE ARE IN THE PRESENTATION MODE
        // GO TO THE NEXT ONE
        $("#galleries").addClass('picture_presentation');  
            console.log("WE ARE IN THE PRESENTATION MODE, GO TO THE NEXT ONE");
            var new_picture = parseInt(picture_to_center_class)+1;

            // Stopping the scroll event to cancelled the presentation mode
            presentation_mode_stop_scrolling="on";

            //scrolling to the next one
            var picture_to_center = $("#galleries ."+new_picture);      
            $("body").scrollTo(picture_to_center, 800, {onAfter:function(){

                console.log("galleries class: "+$("#galleries").attr('class'));
                presentation_mode_stop_scrolling="off";
                return false;
                console.log("removed class");
            }});
        }
        else
        {
        // THE PRESENTATION MODE
        // FOCUS THIS ONE
            // We are adding the presentation mode to the DOM 
            $("#galleries").addClass("picture_presentation");
            console.log("PRESENTATION MODE, FOCUS THIS ONE, ADDING THE PRESENTATION CLASS ");

            // Get the binding element class number 
            picture_to_center_class = $(this).attr('class');
            console.log("picture_to_center: "+picture_to_center_class);

            picture_to_center = $("#galleries ."+picture_to_center_class);


             // Stoping the (windows).scroll to removed the galleries class 
            presentation_mode_stop_scrolling="on";
            $("body").scrollTo(picture_to_center, 800, {onAfter:function(){
                 presentation_mode_stop_scrolling="off"; 
                 return false;
                 $("#galleries").addClass('picture_presentation');
//               console.log("galleries class: "+$("#galleries").attr('class'));
                 } });
         }
         return false;
    });

    // ADD THE FUNCTION TO REMOVE THE USER FROM THE PRESENTATION MODE   
    $(window).scroll(function () {
//  console.log("presentation_mode_stop_scrolling: "+presentation_mode_stop_scrolling); 
      if(presentation_mode_stop_scrolling=="off")
      {
          $("#galleries").removeClass("picture_presentation");
          console.log("THE PRESENTATION MODE HAS BEEN REMOVED");
      }
    }); 


}); 

Answer 1

我相信这就是您正在寻找的结果，我已经清理了一些代码，但想法是相同的。

http://jsfiddle.net/cf26A/5/

主要问题是 $(window).scroll 在 after onAfter 函数执行后触发一次，这就是 presentation_mode_stop_scrolling 标志始终处于关闭状态。

我添加了一点延迟来处理这个问题，可能不是最佳实践。应该有一种方法可以阻止 $(window).scroll 被触发。如果有人知道请留言，我也想学习。

希望有帮助。