Search code examples
jqueryhtmlcssscrollmobile-browser

How could I handle scroll on webpage and mobile browser?


I am trying to build a web site. And requests of client are like below.

  • want to scroll div popup while background ignores scrolling
  • want to do this on mobile also.

As far as I know. I can handle scroll with CSS via 'overflow' keyword. My strategy was

  • when popup display attribute turns in block, then call $('body').css('overflow', 'hidden').
  • when popup display attribute turns in none, then call $('body').css('overflow', 'auto').

this works in web browser. However, when I try this on mobile browser, it works in opposite way.

I found some article, if I use 'overflow', it can be a cause of problem like below link.

Website will not scroll on mobile devices

Is there any solution of this problem? If I should remove 'overflow', what should I replace it with?

Thanks :D

================================

Things I had tried after original post.

add javascript (22 Apr)

function toggleBackgroundScroll(){
    var cur = $('body').css('overflow');
    if(cur == null || typeof cur == 'undefined') cur = 'auto';

    if(cur != 'hidden'){
        //scroll, auto 
        //when div popup showed up 
        $('body').css('overflow', 'hidden');
        $('body').on('touchmove', function(e){
            //below alert works!
            //alert('touchmove prevent!');
            e.preventDefault();
        });
    }else{
        //hidden
        //when div pop up is disabled. 
        $('body').css('overflow', 'auto');
        $('body').on('touchmove', function(e){
        });
    }
}

Thanks for your comment.(kevinAlbs) But it still works opposite way. Can not scroll Popup contents, but background is scrollable.


Solution

  • I found the way :D

    It was all about CSS. I found a post (please understand me, I did not link since it was not written in english) which says in mobile environment browsers block overflow attribute automatically.

    So if you want to use overflow in mobile, you should add a line of CSS -webkit-overflow-scrolling : touch;. I had added this to body element like below.

    .body {
      -webkit-overflow-scrolling: touch;
    }
    

    I wish this will help people like me :)

    • added 27th April 2015

    Sad news about this. The code above only works in iPhone4. In recent model like iPhone5 and further does not work. Still users can not scroll contents of popup div but only background :<