我试图为在 iPad 上呈现的网站创建一个简单的两列布局，但我遇到了一些问题。我不知道如何描述这个，所以我链接到下面的截图来开始：
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>
如您所见，布局由标题和两列组成。javascript 将列设置为与视口底部对齐，首先是在页面加载和方向更改时。如果我在列外的背景上滚动，JS 也会停止文档滚动。
但是，如果我将两列滚动到底部，然后继续在它们之间切换并滚动，则会产生上图中显示的问题。
任何人都可以帮忙吗？