禁用滚动，动画，然后再次启用滚动

Question

（第一个问题，所以很好：））

我正在尝试禁用滚动，为div设置动画，然后重新启用滚动。 到目前为止，我已经完成了这一令人难以置信的任务的前两个部分，但是，a，我似乎无法使它再次滚动。

我正在使用JeanValjean在如何以编程方式禁用jQuery页面滚动方面定义的lockScroll（）和unlockScroll（）函数

任何帮助将非常感激。 请参阅演示http://jsfiddle.net/Chris_James/1xxL5dnp/6/

jQuery(document).ready(function(){
$(window).scroll(function(){
    var p = $( ".testi" );
    var offset = p.offset();
    if ($(this).scrollTop() > offset.top - $(window).height()/2) {
        lockScroll();
        $('.testi').addClass( 'testishow' );
        setTimeout(function(){
            $('.testimonial').fadeIn('fast');
            unlockScroll();
        },700);
    }
})

}）;

Answer 1

您可以为此使用函数回调

$('.testimonial').fadeIn('fast', function(){
    unlockScroll();
});

在这种情况下，仅在fadeIn完成动画后才执行函数unlockScroll() 。

UPD：添加了小提琴

Answer 2

jQuery(document).ready(function(){
$(window).scroll(function(){
   var p = $( ".testi" );
   var offset = p.offset();
   if ($(this).scrollTop() > offset.top - $(window).height()/2) {
       lockScroll();
       $('.testi').addClass( 'testishow' );
       setTimeout(function(){
          $('.testimonial').fadeIn('fast', function() { 
              unlockScroll(); 
          });
       },700);
    }
})

Answer 3

就像Good.luck推荐的一样，您可以使用回调进行解锁（嗯，我花了几秒钟时间……）。 我认为您不必只声明unlockScroll函数。

lock / unlockScroll（）方法似乎有点超重。 我建议cubbius答案使用html元素的“溢出：隐藏”样式。 利用当前的滚动事件创建一个函数，并使用以下方法将其解锁：

$(window).off("scroll touchmove mousewheel", function () {
   $(window).on("click", yourScrollMethod);
})

Answer 4

解决方案-在if语句中添加一个类（卷入式），并使用&&检查它。 简单。 http://jsfiddle.net/Chris_James/1xxL5dnp/6/

if ($(this).scrollTop() > offset.top - $(window).height()/2 && !p.hasClass("scrollLocked")) {
        lockScroll();
        p.addClass("scrollLocked");
        $('.testi').addClass( 'testishow' );