Question

（第一个问题很好:) :)

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

我正在使用由JeanValjean在How to programmatically disable page scrolling with 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();
});

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

UPD：已添加Fiddle

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回答＆＃34;溢出：隐藏＆＃34; html元素的样式。从当前滚动事件中创建一个函数并使用以下命令解锁：

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

Answer 4

解决方案 - 在if语句中添加一个类（scrolllocked）并检查它（使用＆amp;＆amp;）。 Simples。 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' );

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

4 个答案: