0

I have an element that is draggable through jQueryUI. I am using it to do a pull-down to refresh interaction.

What I am trying to accomplish is when the user has scrolled to the top of the window / body, but attempts to scroll further, then as per the distance the user scrolls up, this element ( #main ) is dragged down.

How I planned to drag it down is by simulating the .mousedown() and and .mousemove() and `.mouseup() events, which seem to work ( meaning they trigger the drag ).

Here is what I think should work in some-real / some-pseudo code:

$(window).on('scroll', function(){
    if($(this).scrollTop() === 0){

        if(extra movement beyond scrollTop 0){
             $('#main').mousedown();
             //move #main down number of pixels of extra movement / extra scroll up.
             $('#main').mouseup();   
        }
    } 
});
gomangomango
  • 661
  • 1
  • 10
  • 29

1 Answers1

1

You can get the scrolling position by doing this:

if($("body").scrollTop() === 0)
{
   //do your stuff
}

The scrollTop() function returns the px number from page scrolling location to the top of the element it is activated on (in the example above - on the body tag).

Here is an example

If you need to get the delta of the scrolling you can find this SO helpful.

Community
  • 1
  • 1
vlio20
  • 8,955
  • 18
  • 95
  • 180
  • Did this answer the question? If so please accept it :) – vlio20 Feb 13 '14 at 23:16
  • no, I know how to use scrollTop, I want to learn how to get the movement beyond the scrollTop === 0. So when scrollTop already is zero and the user tries to scroll more, how to I learn how much they are trying to scroll more? – gomangomango Feb 13 '14 at 23:19
  • You may do it with a little hacking. You can create an element (for example) with height 100px but use only 90px of it (by initially setting the default position to 10px. and then when the user will try to move over the top of this 10px you will get this position. if you are trying to achieve pull to refresh effect here is a link http://usehook.com/ – vlio20 Feb 13 '14 at 23:24
  • I've heard of hook, but it doesn't satisfy my needs. I want to make something like hook where when the user scrolls up more than 0 then the amount they scroll is the amount an element is dragged. – gomangomango Feb 13 '14 at 23:31
  • Try the link I added in my answer. I think it is just what you need. See other answers on this topic to extend your needs. – vlio20 Feb 13 '14 at 23:37
  • Thank you, that helps me understand scrollUp, but not scrollUp beyond zero. – gomangomango Feb 13 '14 at 23:45
  • http://stackoverflow.com/questions/10313142/javascript-capture-mouse-wheel-event-and-do-not-scroll-the-page. Thus maybe will help you – vlio20 Feb 14 '14 at 07:29