I am trying to build a web site. And requests of client are like below.
As far as I know. I can handle scroll with CSS via 'overflow' keyword. My strategy was
$('body').css('overflow', 'hidden')
.$('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.
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 :)
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 :<