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. Python - 先頭へ戻るループwhileループ
- 2. 先頭へ戻るボタンとフッタ（配置）
- 3. PHP：一種の 'break'を使ってループの先頭に戻る？
- 4. リストビューの先頭に戻るarrayadapterのデータを更新した後
- 5. 自動スクロール：ページの先頭に戻るジャンプ
- 6. ブラウザの垂直スクロールバーをASP.NETコードの先頭に戻す
- 7. jQueryを使ってウィンドウの先頭に戻す
- 8. UITableViewをxcodeの先頭に戻す方法は？
- 9. |行の先頭に -
- 10. 先頭のプロセスコマンド
- 11. Android C＃xamarin help！コードの先頭に戻るにはボタンが必要です
- 12. jQuery-Textareaの先頭にスクロール
- 13. webapp2.オプションの先頭に
- 14. QAbstactTableModel先頭に挿入
- 15. UITextViewのオートコレクションタイプの先頭に
- 16. アプリケーションウィンドウの先頭へ
- 17. ファンシーボックスのタイトルの先頭にある
- 18. iPhone - オーディオファイルの先頭にある "無音"
- 19. アノテーション付きタイムラインの先頭にある
- 20. ListViewをListViewの先頭にスクロールする
- 21. NSTextViewから文字列を取得してからカーソルを先頭に戻す
- 22. R：文字列の先頭から先頭のゼロを削除する
- 23. キャッシュラインの先頭の変数
- 24. ファイルの先頭へのアクセス
- 25. Dynamicjasper Excelと先頭のアポストロフィ
- 26. numpy loadtxt先頭行をスキップ
- 27. コードの先頭のCTP4エラーマッパー
- 28. Backbone.jsと先頭のハッシュ
- 29. 先頭アドレス無限ループ
- 30. グループの先頭文字
あなたのページが動作しているようです。フィドルで問題の別の例を作成してください –