1. 首頁
  2. 問答
  3. iPad上的兩列網頁佈局

iPad上的兩列網頁佈局

2013-05-28 39 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

相關問題

 相關問題