CODEWITHSUNDEEP
jqueryhtml
Ernest Soo
Ernest Soo

Reputation: 194

Disable down scrolling while detecting down scrolling

I have a simple welcoming page on my website that displays an image along with its title and buttons to sign up.

Working Fiddle: JSFiddle

Problem: I want to be able to disable scrolling of the page, while detecting any down scrolling event.

This is because I want to be able to perform some animations on the down scroll event rather than the page actually scrolling.

Attempt: 

        $(document).ready(function() { 

                      var CurrentScroll = 0;
                      $(window).scroll(function(event){

                          var NextScroll = $(this).scrollTop();

                          if (NextScroll > CurrentScroll){
                             //write the codes related to down-ward scrolling here
                             /// Animations Codes Here

                          }
                          else {
                             //write the codes related to upward-scrolling here

                          }

                          CurrentScroll = NextScroll;  //Updates current scroll position
                      });
                    });

This is the script that I tried to detect downward scrolling, but the animation is not seen due to scrolling therefore I need a workaround.

How can I achieve what I want using jquery?

Upvotes: 0

Views: 33

Answers (2)

Clonkex
Clonkex

Reputation: 3637

The easy way is to simply listen for the scroll event and forget about trying to prevent the scrolling, then take over the scrolling for the user, like so:

var scrollTarget = 300;
$("#divThatScrolls").scroll(function() {
    $("#divThatScrolls").animate({ scrollTop: scrollTarget+"px" });
});

And just change scrollTarget depending on where you want to scroll to.

Upvotes: 1

Max3no
Max3no

Reputation: 11

body
{
  position: fixed; 
  overflow-y: scroll;
  width: 100%;
  height: 100%
}

try this

Upvotes: 0

Related Questions