overflow-y:hidden, but still scrollable with firefox on android

Question

I open a partial view in an overlay using jquery (showing a fixed div and disable scrolling for the underlying webpage). This seems to work in chromium and firefox on the desktop, and also in chrome for android, but not in firefox/android:

$('a#manage-albums').click(function(){
    $.get( this.href )
        .done(function( data ) {
            $('div#flvr-overlay-content').html(data);
            $('div#flvr-overlay-back').show();
            $('html,body').css('overflow-y','hidden');
        });
    return false;
});

The overlay appears and shows its content, is fixed and everything looks good, but I can still scroll the underlying webpage..

I also have this meta tag in use, if that matters:

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no" />

How can I disable scrolling (overflow-y) also for firefox on android?

edit:

It looks as if firefox does not like the 'overflow-y'.

With this line:

$('html,body').css('overflow','hidden');`

the scrolling seems to be stopped / reduced to the height of the firefox menu bar.

Answer 1

there are a number of ways to do it, first try

gridview.setOnTouchListener(new OnTouchListener(){

@Override
public boolean onTouch(View v, MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_MOVE){
        return true;
    }
    return false;
}

});

thats for a gridview.

Source

for a scrollview use "verticalScrollDisabled = true"

or use (javascript)

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

or jquery

$(document).bind('touchmove', function(e) {
    e.preventDefault();
});

failing that use $("body").css("overflow", "hidden!important"); and that should work