1. 홈
  2. 질의 응답
  3. iPad에서 2 열 웹 레이아웃

iPad에서 2 열 웹 레이아웃

2013-05-28 2 views
1

iPad에서 렌더링 된 웹 사이트에 간단한 2 열 레이아웃을 만들려고 시도했지만 문제가 있습니다. 나는 이것을 설명하는 방법을 정확히 모르는, 그래서 내가 일을 킥오프 아래의 스크린 샷에 연결했습니다iPad에서 2 열 웹 레이아웃

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>

당신은 레이아웃 헤더와 두 개의 컬럼으로 구성되어 볼 수 있듯이. 자바 스크립트는 페이지가로드되고 방향이 바뀔 때 먼저 뷰포트의 맨 아래에 맞춰 지도록 열을 설정합니다. 또한 JS는 열 밖의 배경을 스크롤하면 문서 스크롤을 중지합니다.

그러나 두 열을 맨 아래로 스크롤 한 다음 스크롤을 계속하면 위에 표시된 이미지로 인해 문제가 발생합니다.

아무도 도와 줄 수 있습니까?

출처

2013-05-28 user164327

답변

0

레이아웃을 돕기 위해 JQuery Mobile과 같은 프레임 워크를 사용해 보셨습니까? 버전 1.3은 그리드를 포함하여 몇 가지 반응이있는 기능을 추가했습니다. 그리드는 컬럼 시나리오를 도와줍니다.

출처

2013-05-28 14:09:38

+0

jQuery를 모바일을 사용으로 우리의 유일한 문제는, 즉 jQuery를 모바일 (나는 그것이 정말 오래된 jQuery의 생각과 호환되지 않습니다 jQuery 모바일이 출시되기 전의 버전). – user164327

관련 문제

 관련 문제