iScroll um div dinamicamente preenchido SOMENTE sem rolagem página principal também
Então, este post pode ficar demorado, mas eu estou preso com o iScroll. O que estou fazendo é preencher minha lista com artigos e quando alguém é clicado, estou deslizando em um div sobre a lista para exibir o artigo. Essa parte funciona, mas o que não funciona é quando rola o artigo e chego ao fim, ele continua rolando a lista com os artigos. Você pode dar uma olhadaAqui (o site está em russo, mas clique em um artigo e role até o final). Aqui está meu código inteiro:
<head>
<style>
body{
padding: 0;
margin: 0;
border: 0;
}
#header{
position:fixed;
top:0;
left:0;
height:100px;
width: 100%;
background-color: black;
}
header{
position: absolute;
z-index: 2;
top: 0; left: 0;
width: 100%;
height: 50px;
}
#wrapper{
position: absolute;
z-index: 1;
width: 100%;
top: 52px;
left: 0;
overflow: auto;
}
#container{
position:fixed;
top:0;
right:-100%;
width:100%;
height:100%;
z-index: 10;
background-color: red;
overflow: auto;
}
#content{
margin:100px 10px 0px 10px;
}
</style>
</head>
<body>
<header>Main News</header>
<div id="wrapper">
<ul id="daily"></ul>
<ul id="exclusive"></ul>
<ul id="must"></ul>
<ul id="main"></ul>
<ul id="ukr"></ul>
<ul id="nba"></ul>
<ul id="euro"></ul>
</div>
<div id="container">
<div id="wrapper2">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script src="js/zepto.js"></script>
<script>
//AJAX requests to fill the li's...
function sayhi(url){
$('#container').animate({
right:'0',
}, 200, 'linear');
$.ajax({
url: serviceURL + "getnewstext.php",
data: {link: url},
success: function(content){
$('#content').append(content);
}
});
}
function hide(){
$('#container').animate({
right:'-100%'
}, 200, 'linear');
$('#content').empty();
}
</script>
<script src="js/iscroll-lite.js"></script>
<script>
var myScroll;
function scroll () {
myScroll = new iScroll('wrapper2', {hScroll: false, vScrollbar: false, bounce: false});
myScroll2 = new iScroll('wrapper', {hScroll: false, vScrollbar: false});
}
document.addEventListener('DOMContentLoaded', scroll, false);
</script>
</body>
Existe uma maneira de rolar no contêiner div, ou conteúdo ou wrapper2 sem rolar o div wrapper com a lista de artigos? Talvez eu não esteja usando o iScroll corretamente? O mesmo problema acontece no Android e no iPhone.
EDIT 1:
Eu defino a posição do invólucro para fixo. Agora o contêiner div é o único que está rolando, mas a lista de artigos não está rolando ... Eu adicionei outro iScroll ao wrapper, mas ele não está funcionando. Algum conselho aqui?
EDIT 2:
Então eu caí iScroll todos juntos e tentando com CSS em vez disso. Para meus eventos onclick eu adicionei:
$('body').css('overflow', 'hidden');
E quando o botão fechar é clicado, mudei o estouro para automático. Agora isso impede o corpo de rolar em um navegador, mas não no celular !!! Como posso fazer a mesma coisa no celular ???