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');
И когда кнопка закрытия нажата, я изменил переполнение на авто. Теперь это останавливает прокрутку тела в браузере, но не на мобильном телефоне!!! Как я могу сделать это сделать то же самое на мобильном телефоне???
1 ответ
Я наконец получил это на работу. Что мне нужно было сделать, это добавить еще один div внутри div-оболочки. Я поделюсь кодом, так что, надеюсь, он поможет кому-то еще. Вот как выглядит новый код:
<body>
<!--Added scroller div(without iScroll it works also...just make two divs so the body isn't scrolled but the second div is scrolled-->
<div id="wrapper">
<div class="scroller">
<header>Main News</header>
<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>
<div id="container">
<div class="scroller">
<div id="header">
<button onclick="hide();">Back</button>
</div>
<div id="content"></div>
</div>
</div>
<script>
$('body').on('touchmove', function(e){
e.preventDefault();
});
//prevents native scrolling so only iScroll is doing the scrolling
//after the AJAX call to get the content, declare your iScroll variable
var myScroll;
myScroll = new iScroll('wrapper');
setTimeout (function(){
myScroll.refresh();
}, 2000);
//set time out to give the page a little time to load the content and refresh your iScroll variable so it takes in the entire content of the wrapper div
var myScroll1;
myScroll1 = new iScroll('container');
//I defined my second iScroll variable here so I can destroy it in the next part...
//function sayhi(url) stays the same but in success of AJAX looks like this:
success: function(content){
$('#content').append(content);
myScroll1.destroy();
myScroll1 = null;
myScroll1 = new iScroll('container');
setTimeout (function(){
myScroll1.refresh();
}, 2000);
}
//when the div slides on the screen and content gets loaded, destroy your second iScroll
//variable, set it to null and define it all over again so it takes in the entire content
И это все. Теперь отлично работает с двумя div, которые должны использовать iScroll на одной странице. Надеюсь, что объяснение достаточно ясно и помогает кому-то!!!