iScroll SÓLO un div relleno dinámico sin desplazar la página principal también
Así que esta publicación puede ser larga pero estoy atascado con iScroll. Lo que estoy haciendo es poblar mi lista con artículos y cuando se hace clic en uno, me estoy deslizando en un div sobre la lista para mostrar el artículo. Esa parte funciona, pero lo que no funciona es cuando me desplazo por el artículo y llego al final, sigue desplazándose por la lista de artículos. Puedes echar un vistazoaquí (el sitio está en ruso, pero haga clic en un artículo y desplácese hasta el final). Aquí está mi código completo:
<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>
¿Hay alguna forma de desplazarse en el contenedor de div, o contenido, o wrapper2 sin desplazar el div de wrapper con la lista de artículos? Tal vez no estoy usando iScroll correctamente? El mismo problema ocurre en Android y iPhone.
EDITAR 1:
Puse la posición de la envoltura en fijo. Ahora el contenedor div es el único que se desplaza, pero la lista de artículos no se desplaza ... Agregué otro iScroll al contenedor, pero no funciona. ¿Algún consejo aquí?
EDIT 2:
Así que dejé caer iScroll todos juntos e intenté con CSS en su lugar. A mis eventos onclick agregué:
$('body').css('overflow', 'hidden');
Y cuando se hace clic en el botón de cerrar, cambié el desbordamiento a automático. ¡Ahora esto evita que el cuerpo se desplace en un navegador pero no en el móvil! ¿Cómo puedo hacer que haga lo mismo en el móvil?