iScroll динамически заполненный раздел ТОЛЬКО без прокрутки главной страницы также
Так что этот пост может быть длинным, но я застрял с iScroll. Что я делаю, так это наполняю свой список статьями, и когда на меня нажимают, я скользлю в списке над списком, чтобы отобразить статью. Эта часть работает, но что не происходит, когда я пролистываю статью и до конца, она продолжает прокручивать список со статьями. Вы можете посмотретьВот (сайт на русском, но нажмите на статью и прокрутите до конца). Вот весь мой код:
<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>
Есть ли способ прокручивать контейнер div, или содержимое, или wrapper2, не прокручивая div упаковщика со списком статей? Может я не правильно использую iScroll? Та же проблема происходит на Android и iPhone.
РЕДАКТИРОВАТЬ 1:
Я установил положение обёртки на фиксированное. Теперь контейнер div - это единственная прокрутка, но список статей не прокручивается ... Я добавил еще один iScroll в оболочку, но он не работает. Любой совет здесь?
РЕДАКТИРОВАТЬ 2:
Поэтому я бросил iScroll все вместе и попробовал использовать CSS. К моим событиям onclick я добавил:
$('body').css('overflow', 'hidden');
И когда кнопка закрытия нажата, я изменил переполнение на авто. Теперь это останавливает прокрутку тела в браузере, но не на мобильном телефоне !!! Как я могу сделать это сделать то же самое на мобильном телефоне ???