differentiate between automatic and human scroll on ipad

[Violet_82]

Hi I have run into a issue recently. I am working on a website that involves quite a bit of scrolling: basically, there is a fixed position menu with some anchor links. when you click on an anchor links the page automatically scrolls down to the desired position. All good except that there is a bug in the Ipad version 5 of the OS http://weedygarden.net/2012/04/ios5-position-fixed-bug/. In a nutshell, on the ipad when you click on an anchor something happens and all the anchors are disabled till you manually scroll a bit. A solution - detailed in the link above - is to hide the navigation after you click on a link, and keep it hidden till the user manually scrolls the windows. To implement that I need to fire an event on scroll, so something like after the page has automatically scrolled to desired position, if user scrolls again, bring the menu back. Take this code that perform the automatic scroll:

 $('myDiv a').click(function (e) {
                e.preventDefault();
                var arrayID = $(this).attr('href').split('#');              
                var theId = arrayID[1];                             
                $('body, html').stop();                             
                $(".navigation").slideUp('fast');
                $('body,html').animate({
                    scrollTop: $("#" + id).offset().top - 290
                }, 800);
                return false;   
            });

When it scrolls the navigation is hidden $(".navigation").slideUp('fast');, then I need to bring it back when the scroll ends (and therefore I can't do it as a callback function of the animate method), so something like

$(window).scroll(function()
    $(".navigation").slideDown('fast');
});

which needs to go somewhere. But I have read thatscroll() doesn't differentiate between human scroll and automatic scroll. This difference is crucial, because everytime the page automatically scrolls then the scroll() gets executed whereas I need a way to say "execute that only when it's the user doing the scrolling".
Hope it makes sense
thanks

[Taywin]

Just a quick response. How about adding a flag that will be turned on when a user clicks but not from auto scroll? Then turns the flag off once the scroll process is done.

[Violet_82]

sure, it's an idea, I could use a boolean variable but how would I determine that it was the user scrolling and not the autoscroll? If the function is scroll() and happens when the user clicks on the link how do I capture the user input (scrolling)?
thanks

[Taywin]

So what function is being called by a user? Is click() event from 'myDiv' the one that user must go through but not the automatic? If so, you could update the flag there. If not, what event/function/action a user must do in order to provoke the scroll() but not the automatic?

[Violet_82]

that's the thing, I don't have the user function as yet, that's what I need to create. The click function, is the one that cause the automatic scroll: you click on a link and the whole page scrolls down/up to the target link. On the Ipad (or on a computer using the scroll bars or the mouse wheel) you then scroll up and down as you please. This is the event I should capture. I was thinking, as said above, to use something like

$(window).scroll(function()
    $(".navigation").slideDown('fast');
});

but this way the function is triggered when the page scrolls (automatic scroll with the click function or user scroll) whereas I want it to be triggered only when the user scroll
thanks

[Taywin]

And that's what I do not understand. :( I mean, an event onclick would be fired if a user click, but the scroll() is a function being called from the autoscroll. I am thinking you may need to take the inline function out of the onclick but give a function instead. Or you will have to let autoscroll to call scroll() function directly without going through the onclick event.

[Violet_82]

hi ok, so break this function

$('myDiv a').click(function (e) {
                e.preventDefault();
                var arrayID = $(this).attr('href').split('#');              
                var theId = arrayID[1];                             
                $('body, html').stop();                             
                $(".navigation").slideUp('fast');
                $('body,html').animate({
                    scrollTop: $("#" + id).offset().top - 290
                }, 800);
                return false;   
            });



and move this out of it $('body,html').animate({
                    scrollTop: $("#" + id).offset().top - 290
                }, 800);

is that what you mean?

[Taywin]

I guess the JQuery format throws me off because I'm not familiar with. I'm still trying to understand a scenario between human & automatic scroll. Because of the work around, the link will be hidden once a user click on a link, correct? So when the auto scroll comes to play?

The function $('myDiv a').click(function (e) {...}) has ever been called by the auto scroll at all? If not, the changing flag should be inside the call back function. If yes, how autoscroll calls this function (a scenario) and how a user calls this function (a scenario)?

[Violet_82]

well the autoscroll

$('body,html').animate({
                    scrollTop: $("#" + id).offset().top - 290
                }, 800);

kicks in when the link is clicked on, because it's inside a click function: so the user clicks on a link and the page scrolls. This is what I would refer to as an automatic scroll. SO say you have clicked on a link and the page (a very long page with a lot of anchor links) scrolls till it reaches the target link. Once there let's say you want to scroll down a little more: so if you're on the ipdad you use your fingers, if on a laptop the scrollbars: this is what I consider human scrolling as opposed to the automatic one.

To answer your question the $('myDiv a').click(function (e) {...}) isn't actually called by the autoscroll, but the autoscroll is called from inside it

[Taywin]

Oh, ok. So here is an idea.

1)Create a flag variable which is global with default value meaning that no human click.
2)Inside the click() right before you call scroll, change the flag to indicate that a user is calling the scroll.
3)Inside the scroll(), check if the flag is human or not. If not, you know that it is called by auto-scroll.
4)Inside the click() after the calling scroll, change the flag back to its default value.

[Violet_82]

ok thanks, I will give it a go