Turn off scrolling and animations temporarily before enabling scrolling once more

Question

Turn off scrolling and animations temporarily before enabling scrolling once more

(Here's my first question, please be kind!)

I'm on a mission to disable scrolling, animate a div, and then re-enable scrolling. I've managed to achieve the first two tasks with flying colors, but unfortunately, getting it to scroll again has proven to be quite challenging.

Currently, I am utilizing lockScroll() and unlockScroll() functions created by the talented JeanValjean over at How to programmatically disable page scrolling with jQuery

Any assistance would be greatly appreciated. For a demo, please visit 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);
    }
})

});

javascript jquery css

Answer 1

Answer №1

When the jQuery document is ready, a function is called to handle window scroll events. This function checks if an element with the class "testi" is in view by comparing its offset position with the window height. If the element is within half of the window's height from the top, certain animations are triggered. The element with the class "testi" is given a new class "testishow" and then a testimonial section fades in gradually. After a delay of 700 milliseconds, the scroll lock is removed.

Answer 2

When the jQuery document is ready, a function is called to handle window scroll events. This function checks if an element with the class "testi" is in view by comparing its offset position with the window height. If the element is within half of the window's height from the top, certain animations are triggered. The element with the class "testi" is given a new class "testishow" and then a testimonial section fades in gradually. After a delay of 700 milliseconds, the scroll lock is removed.

Answer 3

Answer №2

Following the suggestion by Good.luck, you can utilize callbacks to unlock scrolling (Although I was just a few seconds too late...). It seems unnecessary to declare a separate function solely for unlocking scroll.

The lock/unlockScroll() methods appear to be a bit cumbersome. Instead, I would recommend implementing cubbius's solution using an "overflow: hidden" style for the html element. Create a function based on your current scroll event and unlock it with:

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

Answer 4

Following the suggestion by Good.luck, you can utilize callbacks to unlock scrolling (Although I was just a few seconds too late...). It seems unnecessary to declare a separate function solely for unlocking scroll.

The lock/unlockScroll() methods appear to be a bit cumbersome. Instead, I would recommend implementing cubbius's solution using an "overflow: hidden" style for the html element. Create a function based on your current scroll event and unlock it with:

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

Answer 5

Answer №3

In order to solve this issue, I simply added a class called "scrolllocked" to the if statement and checked for its presence using &&. It's as easy as that. Check out the solution here

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

Answer 6

In order to solve this issue, I simply added a class called "scrolllocked" to the if statement and checked for its presence using &&. It's as easy as that. Check out the solution here

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

Answer 7

Answer №4

If you want to wait for an animation to finish before executing a function, utilize function callbacks like so:

$('.box').slideDown('slow', function(){
    showText();
});

In this scenario, the showText() function will only be called once the slideDown animation is completed.

UPDATE: Check out this JSFiddle for a live example.

Answer 8

If you want to wait for an animation to finish before executing a function, utilize function callbacks like so:

$('.box').slideDown('slow', function(){
    showText();
});

In this scenario, the showText() function will only be called once the slideDown animation is completed.

UPDATE: Check out this JSFiddle for a live example.

Turn off scrolling and animations temporarily before enabling scrolling once more

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Obtaining text color in Selenium using Python

Setting a static width for a specific cell in HTML5 - What's the best way to go about it?

Establishing a connection to an active process within Winappdriver with the utilization of JavaScript

jQuery's AJAX functions failing to trigger callbacks following a file upload

Prevent Loading of Nested States in UI-Router

django.http.request.RawPostDataException: It is not possible to retrieve the body content once the request's data stream has been read

What is the best way to create an input field along with a span element using the :before pseudo class?

What are the steps to lift non-React statics using TypeScript and styled-components?

Pictures are not aligning correctly within a div element on Safari

Handling Exceptions in Node.js and Express

Troubleshooting Floating Divs in ExtJs TreePanel Component

What is the manual way to activate Ratchet's push feature?

Using C# Razor Pages to send checkbox values via AJAX requests

The code signal's challenge to find the common character count is a fun

The uppermost part is malfunctioning

Using jQuery's .live('click') method will only bind to the initial element found on the webpage

Exploring the World with AngularJS and Google Maps API through ngGeolocation

Adjust the color of the bootstrap navbar upon resizing the screen

The ng-class styling isn't being implemented

Ensuring Form Submission is Successful: A Guide to JQuery/Ajax Form Validation and the Importance of Validating Forms and Ajax Operations