Disable scroll, animation, then enable scroll again

Question

(first question so be nice :) )

I'm trying to disable scroll, animate a div, then re-enable scrolling. So far I have accomplished the first two parts of this incredible quest, but alas, I cannot seem to get it to scroll again.

I am using lockScroll() and unlockScroll() functions defined by JeanValjean on How to programmatically disable page scrolling with jQuery

Any help would be much appreciated. Please see demo 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);
    }
})

});

A few comments - it's often a bad idea to trigger animations on the `scroll` event - it usually leads to really bad UI performance. You should look into debouncing the scroll event to avoid triggering your handler repeatedly in a very short space of time (http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/). Secondly, disabling scroll _during a scroll event_ is bound to confuse people! — joews, Sep 12 '14 at 08:20
Triggering animations on scroll seems to be commonplace, and quite a trendy thing to do http://themeforest.unitedthemes.com/wpversions/brooklyn/landing/ I'm actually disabling scroll to improve the experience, as it is likely the user will scroll down too quickly to see the div open up (increase height) and view the text. I'll take a look at debounce - how would you use it in this case? — Chris_James, Sep 12 '14 at 08:38

score 0 · Answer 1 · edited Sep 12 '14 at 15:37

0

You can use function callbacks for this e.g.

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

In this case function unlockScroll() will execute only after fadeIn finished it's animation.

UPD: Added Fiddle

edited Sep 12 '14 at 15:37

Chris_James

23
4

answered Sep 12 '14 at 08:21

Y.Puzyrenko

2,166
1
15
23

Thank you for the suggestion, unfortunately the unlockScroll() function is not doing its job :( I shall make a jsFiddle. – Chris_James Sep 12 '14 at 08:42
@Chris_James You forgot to declare `lockScroll()` and `unlockScroll` functions in your fiddle. Added working fiddle to my answer. – Y.Puzyrenko Sep 12 '14 at 11:36

score 0 · Answer 2 · answered Sep 12 '14 at 08:22

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);
    }
})

score 0 · Answer 3 · edited May 23 '17 at 12:05

Like Good.luck recommended, you can you use callbacks for unlocking (Well, I was a few seconds to late...). I think you don't have to declare a function just unlockScroll.

The lock/unlockScroll() methods seems to a bit to be overweight. I would recommend cubbius answer with an "overflow: hidden" style for the html element. Make a function out of your current scroll event and unlock it with:

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

Chris_James · Accepted Answer · 2014-09-12T15:19:21.113

0

Solution - adding a class (scrolllocked) to if statement, and checking for it (with &&). 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' );

edited Sep 12 '14 at 15:19

answered Sep 12 '14 at 10:12

Chris_James

23
4

Disable scroll, animation, then enable scroll again

4 Answers4