Detect scroll direction using jQeury

I have a content div on a web page that allows users to jump to any point on the current page.  These documents are pretty long and so the content div moves up and down to stay on screen with use of scrollTop().

However, as these documents become larger, the content div is becoming larger than the viewport and as it lines up with the top of the page, it is sometimes impossible to get to the bottom of the content div.

I have come up with a solution that requires me to know what direction the viewport is scrolling in.  Can this be done?  If I can find the scrolltop() value on scroll start and scrol end I could work out the direction so this may also be an option

Many Thanks
LVL 6
snavebelacAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
mahomeConnect With a Mentor Commented:
Hi use the scroll()-event to know when scrolling happens and save the scrollTop() in a variable, so you know next time the difference. See code example:

<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
<script>
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    
    var lastScrollTop = 0
    var currentScrollTop = 0
    $(window).scroll(function (event) { 
        lastScrollTop = currentScrollTop
        currentScrollTop = $(document).scrollTop()
        if (currentScrollTop > lastScrollTop) 
            $("span").text("going down")            
        else
            $("span").text("going up")
         $("span").css("display", "inline").fadeOut("slow"); 

    });
</script>
</body>
</html>

Open in new window

0
 
snavebelacAuthor Commented:
Great - Thanks
0
All Courses

From novice to tech pro — start learning today.