Are they going to fix mobile scroll events?

Question

I've got this working on the desktop, but not on mobile. The bar is supposed to appear when the person scrolls up and get stuck to the bottom of the page.

http://54.200.76.33:8080/

On mobile browsers like safari, the bar keeps going until the momentum stops. I'm reading that javascript is disabled while the user scrolls web pages so there's no way to catch the event.

I'm reading the Google tutorial here https://developers.google.com/mobile/articles/webapp_fixed_ui

But I still think this doesn't fix my problem. Are there any plans in the future of fixing mobile browsers? Is there any possible way to work around the problem?

<script type="text/javascript">//<![CDATA[ 
/*THIS WORKS FINE ON DESKTOP BROWSERS*/
/*Needs to work on mobile browsers*/ 
$(window).load(function(){
var foundTop = $('.found').offset().top;
$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= 40) {
        $('.found').css({
            position: 'fixed',
            bottom: '0',
            left: '0'
        });
    } else {
        $('.found').css({
            position: 'absolute',
            bottom: '-40px',
        });
    }
});
});//]]>  



</script>

Vicky Gonsalves · Accepted Answer · 2013-10-03T05:48:24.297

1

There is a css fix: You have used:

style="position: absolute; bottom: -40px; left: 0px;"

For your fixed positioned footer apply following css:

style="position: fixed; -webkit-backface-visibility:hidden; bottom: -40px; left: 0px;"

and fixed javascript:

<script type="text/javascript">//<![CDATA[ 
/*THIS WORKS FINE ON DESKTOP BROWSERS*/
/*Needs to work on mobile browsers*/
$(window).load(function(){
    var foundTop = $('.found').offset().top;
    $(window).scroll(function () {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= 40) {
            $('.found').css({               
                bottom: '0',
                left: '0'
            });
        } else {
            $('.found').css({                
                bottom: '-40px'
            });
        }
    });
});//]]>

edited Oct 03 '13 at 05:48

answered Oct 03 '13 at 05:30

Vicky Gonsalves

11,593
2
37
58

Thanks Vicky! I'd like the footer to be invisible when the page loads. And then when the user starts scrolling down, I'd like it to appear. It's like they're scrolling down to find more notes. "Oh, you're searching for more notes? Here's a search bar!" – Tyler Langan Oct 03 '13 at 05:32
It starts as position: absolute and bottom: -40px because it's supposed to be invisible when the page loads. It only becomes fixed to the bottom when the user scrolls down. – Tyler Langan Oct 03 '13 at 05:42
Thanks Vicky! Trying it out now. – Tyler Langan Oct 03 '13 at 05:50
Okay, I deployed the modified code. It still works on desktop browsers and not on my mobile browser. Is it because "else css = etc.." in the javascript is still there? – Tyler Langan Oct 03 '13 at 05:54
else { $('.found').css({ position: 'absolute', bottom: '-40px', }); – Tyler Langan Oct 03 '13 at 05:55
It needs to be absolute when it's -40 pixels so it can still scroll up. Then it needs to be changed to fixed. – Tyler Langan Oct 03 '13 at 05:56
did you add -webkit-backface-visibility:hidden; to footer? i cant see it in your demo link? – Vicky Gonsalves Oct 03 '13 at 06:00
I really appreciate your help on this. Changed the javascript and still no luck. – Tyler Langan Oct 03 '13 at 06:01
I think there is no need to use position absolute in code..instead of that u can use position fixed as a replacement of it... try and update the code as i ve answered above – Vicky Gonsalves Oct 03 '13 at 06:04
It's updated exactly as you specified. I think it's a bug with mobile browsers. Although I think the newest version of android MIGHT have fixed this. I could be wrong. – Tyler Langan Oct 03 '13 at 06:05
You're right, though. The position doesn't need to be absolute for this to work on desktop browsers. – Tyler Langan Oct 03 '13 at 06:06
Zeus I m talking about mobile browser...:) – Vicky Gonsalves Oct 03 '13 at 06:07

Are they going to fix mobile scroll events?

1 Answers1