javascript - 动画滚动功能搞砸了使用移动 View 的触摸控件

Question

滚动功能上的动画在桌面 View 上运行良好，但当我切换到移动 View 并使用触摸滚动屏幕时，它会扰乱滚动并滚动到随机部分。这是我的滚动功能动画:

$(window).scroll(function() { 
    $('.skillbar').each(function(i){  
  if($(window).scrollTop() + $(window).height() > $(this).offset().top ){ 
    jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);       
  }   
}); 

});

如果我使用窗口滚动功能，它会弄乱移动 View 。请帮助解决这个问题，以便滚动动画可以在带有触摸滚动的移动 View 和桌面 View 上工作，而不会弄乱滚动。

有关更多信息，这些是其他滚动事件:

(function($) {
    "use strict"; // Start of use strict

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 54)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '#mainNav',
        offset: 80
    });

    // Closes the Responsive Menu on Menu Item Click
    $('#navbarResponsive>ul>li>a').click(function() {
        $('#navbarResponsive').collapse('hide');
    });

    // jQuery to collapse the navbar on scroll
    $(window).scroll(function() {
        if ($("#mainNav").offset().top > 100) {
            $("#mainNav").addClass("navbar-shrink");
        } else {
            $("#mainNav").removeClass("navbar-shrink");
        }
    });

    })(jQuery); // End of use strict

Answer 1

编辑

因为这是两个事件的相同函数...
也许在同一个处理程序上调用它并使用 或 只触发一次就可以了。

$(window).on("touchmove scroll", function(e) { 

    // Do the function on ONLY ONE of the two event.
    if(e.type=="touchmove" || e.type=="scroll"){
        $('.skillbar').each(function(i){  
            if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
                jQuery(this).find('.skillbar-bar').not(".triggered").addClass("triggered").animate({
                    width:jQuery(this).attr('data-percent')
                },6000);       
            } 
        }); 
    }
});

编辑

我使用 triggered 类添加了一个 subtility。

.not(".triggered").addClass("triggered")

在 .each() 函数的第一次迭代中，没有一个 skillbar-bar 有 trigered 类。
所以让我们添加它!然后触发动画。

在第二次和所有下一次迭代中，triggered 类从集合中移除所有已经具有 triggered 类的 skillbar-bar .

这可以防止 animate() 函数在每个 skillbar-bar 上被触发多次。

我认为这是问题所在。
让我知道它是否有效!