1. 首页
  2. 问答
  3. iPad上的两列网页布局

iPad上的两列网页布局

2013-05-28 40 views
1

我试图为在iPad上呈现的网站创建简单的双列布局，但我遇到了一些问题。我完全不知道该怎么形容这个，所以我已经连接到下方的截图踢东西了：iPad上的两列网页布局

http://i41.tinypic.com/3093ecw.jpg

Esentially浏览器是提升整个文档，当我到达底部该文档，并在后台显示某种构建。

我会如何防止这种情况发生？即当用户滚动到页面的底部时，就没有更多的滚动了，简单的是？

我的代码如下：

<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也会停止文档滚动。

但是，如果我将两列滚动到底部，然后在它们之间切换并滚动，则会产生上图中显示的问题。

任何人都可以帮忙吗？

来源

2013-05-28 user164327

回答

0

你有没有考虑过使用像JQuery Mobile这样的框架来帮助布局？ 1.3版增加了一些响应功能，包括网格。网格将帮助您的列情况。

来源

2013-05-28 14:09:38

+0

我们使用jQuery Mobile的唯一的问题是，从整个网站进行了深入与旧版本的jQuery的整合，这是与jQuery Mobile的（我认为这是一个非常老的jQuery不兼容从jQuery mobile发布之前的版本开始）。 – user164327

相关问题

 相关问题