我正在创建一个基于 jQuery 移动的页面（与 jCarousel 结合使用），但目前我遇到了 iScroll 的问题 页面的红色部分是可滚动的，但是当我向下滚动时，它会自动向上滚动。我已经阅读了有关此问题的各种提示，但没有一个
问问题
552 次
2 回答
0
您的代码中的问题是显示包装器 div 中的所有内容，因此滚动器不再可用，因为没有未显示的内容。但是页面中的灰色区域仅与包装器 div.i 的内容重叠自定义包装器 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>
于 2012-03-26T04:34:09.627 回答
0
#wrapper {
position: absolute;
top: 0px;
bottom: 0px;
}
我刚刚遇到了这个问题并修复了它，确保你的包装 div 的位置是绝对的或固定的，并且定义了顶部和底部。
于 2013-08-14T08:38:04.347 回答