iScroll仅动态填充div而不滚动主页
[英]iScroll a dynamically filled div ONLY without scrolling main page also
问题描述
So this post might get lengthy but I'm stuck with iScroll. 
所以这篇文章可能会变得冗长，但我坚持使用iScroll。 What I'm doing is populating my list with articles and when one gets clicked, I'm sliding in a div over the list to display the article. 我正在做的是用文章填充我的列表，当点击一个时，我在列表中滑动以显示文章。 That part works but what doesn't is when I scroll through the article and get to the end, it keeps scrolling the list with articles. 那部分可以工作，但是当我滚动文章并到达最后，它继续滚动列表与文章。 You can have a look here (the site is in russian but click on an article and scroll all the way to the bottom). 你可以看看这里 （该网站是俄语，但点击文章，一直滚动到底部）。 Here's my entire code: 这是我的整个代码：
<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>
Is there a way to scroll on the div container, or content, or wrapper2 without scrolling the wrapper div with the list of articles? 有没有办法滚动div容器，内容，或wrapper2而不滚动包装div与文章列表？ Maybe I'm not using iScroll correctly? 也许我没有正确使用iScroll？ The same problem happens on Android and iPhone. Android和iPhone上也会出现同样的问题。
EDIT 1: 编辑1：
I set the wrapper position to fixed. 我将包装器位置设置为固定。 Now the div container is the only one scrolling but the list of articles isn't scrolling...I added another iScroll to the wrapper but it's not working. 现在div容器是唯一一个滚动但文章列表不滚动...我添加了另一个iScroll到包装器，但它不起作用。 Any advice here? 有什么建议吗？
EDIT 2: 编辑2：
So I dropped iScroll all together and trying with CSS instead. 所以我将iScroll全部放在一起并尝试用CSS代替。 To my onclick events I added: 对于我的onclick事件，我补充说：
$('body').css('overflow', 'hidden');
And when the close button is clicked I changed the overflow to auto. 当单击关闭按钮时，我将溢出更改为自动。 Now this stops the body from scrolling in a browser but not on mobile!!! 现在，这可以阻止身体在浏览器中滚动，但不能在移动设备上滚动！ How can I make it do the same thing on mobile??? 我怎样才能让它在移动设备上做同样的事情???
1 个解决方案
解决方案1
2 已采纳 2013-08-02 17:42:29
I finally got it to work. 我终于开始工作了。 What I needed to do is add another div inside the wrapper div. 我需要做的是在包装器div中添加另一个div。 I'll share the code so hopefully it helps someone else Here's what the new code looks like: 我将分享代码，所以希望它可以帮助其他人以下是新代码的样子：
<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
And that's it. 就是这样。 Works perfectly now with two divs which need to use iScroll on the same page. 现在可以完美地使用两个需要在同一页面上使用iScroll的div。 Hope the explanation is clear enough and helps someone!!! 希望解释清楚，并帮助别人！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.