iPad でレンダリングされた Web サイト用に単純な 2 列のレイアウトを作成しようとしていますが、いくつか問題があります。これを正確に説明する方法がわからないので、以下のスクリーンショットにリンクして開始します。
http://i41.tinypic.com/3093ecw.jpg
基本的に、ドキュメントの一番下に到達すると、ブラウザはドキュメント全体を持ち上げ、バックグラウンドで何らかのビルドを表示します。
これを防ぐにはどうすればよいですか？つまり、ユーザーがページの一番下までスクロールすると、スクロールがなくなります。
私のコードは以下の通りです：
<html>
<head>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
#container {
width: 820px;
margin: 0 auto;
/*border: 1px solid red;*/
}
#header {
text-align: center;
width: 100%;
border: 1px solid black;
height: 100px;
margin-bottom: 10px;
}
#left-column {
height: 100%;
overflow: scroll;
float:left;
width:200px;
border: 1px solid black;
-webkit-overflow-scrolling: touch;
}
#right-column {
height: 100%;
overflow: scroll;
float: right;
width: 600px;
border: 1px solid black;
-webkit-overflow-scrolling: touch;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).bind('touchmove', function(e) {
console.log("PREVENTING DEFAULT");
e.preventDefault();
});
bindScrollableColumn('#left-column');
bindScrollableColumn('#right-column');
resizeScrollableColumns(getSizeAboveLeftScrollableColumn(), getSizeAboveRightScrollableColumn());
window.onorientationchange = function() {
resizeScrollableColumns(getSizeAboveLeftScrollableColumn(), getSizeAboveRightScrollableColumn());
}
});
function resizeScrollableColumns(sizeAboveLeftScrollableColumn, sizeAboveRightScrollableColumn) {
var newLeftScrollableColumnHeight = window.innerHeight - sizeAboveLeftScrollableColumn;
var newRightScrollableColumnHeight = window.innerHeight - sizeAboveRightScrollableColumn;
$('#left-column').attr('style', 'height:' + newLeftScrollableColumnHeight + 'px !important');
$('#right-column').attr('style', 'height:' + newRightScrollableColumnHeight + 'px !important');
}
function getSizeAboveLeftScrollableColumn() { return 112; }
function getSizeAboveRightScrollableColumn() { return 112; }
function bindScrollableColumn(columnSelector) {
$(columnSelector).bind('touchstart', function(e) {
if (e.currentTarget.scrollTop === 0) {
e.currentTarget.scrollTop = 1;
} else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
e.currentTarget.scrollTop -= 1;
}
});
$(columnSelector).bind('touchmove', function(e) {
console.log("stopping propagation");
e.stopPropagation();
});
}
</script>
</head>
<body>
<div id="container">
<div id="header">
HEADER
</div>
<div id="left-column">
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
ghdjdsi<br />
</div>
<div id="right-column">
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
abcdefg<br />
ghdjdsi<br />
</div>
</div>
</body>
</html>
ご覧のとおり、レイアウトはヘッダーと 2 つの列で構成されています。JavaScript は、最初にページが読み込まれ、向きが変更されたときに、ビューポートの下部に合わせて列を設定します。列の外側の背景をスクロールすると、JS はドキュメントのスクロールも停止します。
ただし、2 つの列を一番下までスクロールし、それらを切り替えてスクロールし続けると、上の画像に表示されている問題が発生します。
誰でも助けることができますか？