4
我正在创建一个基于jQuery的移动页面（与jCarousel结合），但是目前我遇到了iScroll的问题 页面的红色部分是可滚动的，但是当我向下滚动时，它会自动滚动备份。 我读过各种提示对于这个问题，但他们没有iScroll返回顶部
页：http://de-raedt.eu/researchpad/index.html
A
回答
0
在你的代码的问题是，在包装DIV的所有内容显示因而滚动不再可用作没有显示的内容。但是，页面中的灰色区域只是与包装div的内容重叠。我自定义了包装div的大小，以便滚动器滚动内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>ResearchPad</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="scrollview.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="iscroll.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="researchpad.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skin.css" />
<style type="text/css">
/**
* Overwrite for having a carousel with dynamic width.
*/
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 100%;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 100%;
height: 300px;
}
div#sidebar{
position:absolute;
top:0;
bottom:0;
left:0;
width:75px;
height:100%;
background-color: yellow;
}
</style>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
/* * * * * * * *
*
* Use this for high compatibility (iDevice + Android)
*
*/
document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false);
function carousel_callback(carousel, state) {
// BWA-HA...I have the carousel now....FEEL THE POWER!
// reset empties it out
$('#reset-caro').click(function(evt) {
carousel.reset();
});
// here's how to call add
$('#add-to').click(function(evt) {
carousel.add((jQuery('#mycarousel').jcarousel('size') + 1), "<li style='width: 50%;'><div style='background-color: green;'>ADDED PAGE</div></li>");
carousel.size(jQuery('#mycarousel').jcarousel('size') + 1);
jQuery('#mycarousel').jcarousel('scroll',jQuery('#mycarousel').jcarousel('size'));
});
}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
initCallback: carousel_callback
});
//$('testje').scrollview();
$('.foo').live('swipeleft swiperight',function(event){
console.log(event.type);
if (event.type == "swipeleft") {
jQuery('#mycarousel').jcarousel('next');
}
if (event.type == "swiperight") {
jQuery('#mycarousel').jcarousel('prev');
}
event.preventDefault();
});
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" class="foo" data-position:fixed>
<div data-role="content" style="padding: 0px">
<div id="sidebar" class="sidebar" style="float: left; width: 75px;">Sidebar</div>
<div id="mainContent" style="float: left; top: 0; bottom: 0; background-color:blue; width: 100%; margin-left: 75px;">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li style="width: 50%;">
<div style="background-color: red;" id="testje">
<div id="wrapper" data-role="content" style="height: 270px;">
<div id="scroller" >
This is an example of how big a one page simple site can be.<br>
<a id="add-to" href="#">add</a> <br>
Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur.
At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto.
Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta. Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur. At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat.
Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta.
Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur.
At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto.
Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta. Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur. At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat.
Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta.<br><br><br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>
</div></div></li>
<li style="width: 50%;"><div style="background-color: green;">Page 2<br><br><br></div></li>
</ul></div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
0
#wrapper { position: absolute; top: 0px; bottom: 0px; }
我只是遇到了这个问题，并固定它，请确保您的包装div的位置是绝对的或固定的，而顶部和底部的定义。
相关问题
- 1. iScroll在触摸事件结束时返回顶部
- 2. imacros javascript返回顶部
- 3. iscroll jquery在部分回发中断
- 4. 如何返回顶部按钮工作
- 5. Mootools返回包含div的顶部？
- 6. 返回页面顶部单击后退
- 7. “选择”顶部返回过多行
- 8. Android Studio的“返回顶部”按钮
- 9. scrollTop在滚动前返回顶部
- 10. Android - 清单更新后返回顶部
- 11. 缩略图url返回页面顶部
- 12. Rails选择列表返回顶部？
- 13. 使循环拍摄返回顶部
- 14. 如何返回代码顶部？也许？
- 15. 脚本运行后返回顶部
- 16. 实现“返回顶部”按钮Android
- 17. 防止使用iscroll滚动到页面顶部？
- 18. 当列表更新时，iScroll跳转到列表顶部
- 19. getBoundingClientRect在Safari中的顶部，左侧，右侧，底部返回0
- 20. 如果返回else语句，如何返回到循环的顶部
- 21. Orientdb返回RID顶点
- 22. 我已返回页面顶部按钮在我的网站，我如何动画滚动回顶部？
- 23. 使用mootools“回到顶部”
- 24. mgwt：ScrollPanel跳回到顶部
- 25. 回到顶部jquery帮助
- 26. HTML：Image不会回到顶部:(
- 27. For循环回到顶部
- 28. iPad UITableView滚动弹回回到顶部
- 29. CSS顶部，然后回滚动到顶部
- 30. responseText返回我的php文件的顶部
看来你的网页作品。请在小提琴上创建单独的问题示例 – 2013-03-06 11:43:05