iOS WebApp에서 가로 스크롤 방지

이전에 비슷한 문제가 발생하여 해결 방법을 이해하지 못했기 때문에 iScroll과 같은 플러그인에 의존하게되었습니다. 이것은 내가 플러그인을 포함하는 것을 거부하는 간단한 작업이다 - 내가 원한 것은 iOS에서 수평 스크롤을 막는 것이다. 여기에는 페이지에 있지만 표시되지 않는 모든 콘텐츠에 대한 고무 밴드 효과가 포함됩니다.iOS WebApp에서 가로 스크롤 방지

고무 밴드를 먼저 비활성화 한 다음 컨테이너 요소에 터치 스크롤을 적용해야합니다. (이드는 "터치"를했습니다). 이것이 올바른 접근 방법인지 확신 할 수 없습니까? 728px에 머물고에서 가로 폭을 방지하지 않습니다 #touch

-webkit-overflow-scrolling: touch; 
overflow: hidden; 
height: 100%; 
@media only screen and (max-width: 768px) { 
    width: 768px; 
}

이에 대한

$(document).bind('touchmove', function(e) { 
    if (!e.target == '#touch') { 
    e.preventDefault(); 
    } 
});

스타일 그러나, 사용자는 여전히 스크롤하여 숨겨진 내용을 볼 수 있습니다. 아이디어?

출처

2012-10-14 Staffan Estberg

당신은 이것에 대해 미디어 쿼리를 사용할 수 있습니다 ->''이것은 페이지의 너비를 장치와 같은 너비로 잠글 것입니다 가로 스크롤을 방지합니다. 이 방법이 효과가 있습니까? – Ohgodwhy

죄송 합니다만 뷰포트가 너무 많이 축소되어 (iOS 기기의 콘텐츠 크기를 구체적으로 지정하는 미디어 쿼리를 사용하여) 뷰포트를 사용할 수 없습니다. –

Dang. 그럼 나는 아이디어가 없어. 죄송합니다 : ( – Ohgodwhy

음, 위의 METAS 같은 유용합니다

<meta content="yes" name="apple-mobile-web-app-capable" /> 
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />

그들은 사용자가 화면을 회전 할 때 발생하는 사파리에서 해당 버그를 방지 할 수 있습니다. 그러나, 원하는 기능을 수행 할 수있는 가장 적절한 방법은 다음과 같습니다

오버 플로우 숨겨진와 부모 DIV를 사용하고이 사업부의 높이가 뷰포트와 오버 플로우와 자식 DIV에 따라 제한되어 있는지 확인 : 자동 또는 CSS 3 overflow-y : 스크롤. 따라서 기본적으로 자식 div 내부의 콘텐츠 크기가 자식의 기본 크기를 초과하면 세로/가로로 스크롤 할 수 있습니다. 부모가 오버 플로우 : 숨김을 가지고 있기 때문에 자식 외부의 내용은 표시되지 않으므로 적절한 스크롤 효과를 얻을 수 있습니다. ** 오버플로 : 숨김을 사용하고 모든 touchEvent에 대한 기본값을 방지하면 스크롤 또는 이상한 브라우저 동작이 발생하지 않습니다. **
JavaScript를 사용하여 DOM의 모든 요소가 가능한 한 많은 요소에 정적 크기를 사용하지 마십시오.
touchStart, touchMove 및 touchEnd 이벤트를 바인딩하십시오. touchMove 이벤트가 수신되지 않는 한 Safari는 항상 touchEnd 이벤트를 발생시키지 않습니다. 단지 자리 표시 자일지라도 Safari의 일관성없는 동작을 피하기 위해 배치하십시오.
수평 슬라이딩은 두 가지 방법으로 가능합니다. 슬라이드 방향을 감지하거나 해당 하위 div를 모든 요소로 채우고 동일한 div에서 새 콘텐츠를로드하면 실제로 이동하여 해당 div의 여백/위치를 이동하는 것이 좋습니다. 그 안에있는 아이는 '스크롤'의 부모입니다. 애니메이션은 더 매끄러운 인터페이스를 위해 사용될 수 있습니다.
터치 이벤트 리스너를 바인딩하십시오.어떤 라이브러리 또는 이벤트 관리 시스템을 사용 중인지 모르지만 상관 없습니다. 해당 작업에 대한 해당 기능을 호출하기 만하면됩니다.
슬라이드 방향 (왼쪽/오른쪽) 가져 오기 :

var slideBeginX; 
function touchStart(event){event.preventDefault();//always prevent default Safari actions 
    slideBeginX = event.targetTouches[0].pageX; 
}; 

function touchMove(event) { 
event.preventDefault(); 
// whatever you want to add here 
}; 

function touchEnd(event) { 
event.preventDefault(); 
var slideEndX = event.changedTouches[0].pageX; 

// Now add a minimum slide distance so that the links on the page are still clickable 
if (Math.abs(slideEndX - slideBeginX) > 200) { 
if (slideEndX - slideBeginX > 0) { 
// It means the user has scrolled from left to right 
} else { 
// It means the user has scrolled from right to left. 
}; 
}; 
};

출처

2012-10-20 20:43:21 flavian

Alex, 그러한 철저한 답변에 감사드립니다! 전에는 비슷한 솔루션을 사용했지만 결코 개념을 고수하지 못했습니다. –

메타를 사용하지 않으면 항상 고무 밴드 효과를 얻을 수 있습니다. 정확하게 사용자가 여전히 갈 수 있어야하는 것보다 페이지 넓은 스트레칭 할 수있을 것이다 장착 페이지가, 당신이 이것을 방지하기 위해 뷰 포트를 사용한다하더라도

<meta name="viewport" content="width=device-width" />

는 다른 방법이 없습니다 ...

출처

2012-10-19 01:11:40 lededje

나를 위해 안드로이드, 아이폰과 iPad에서 작동합니다.

<!doctype html> 
<html> 
    <head> 
     <meta content="yes" name="apple-mobile-web-app-capable" /> 
     <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" /> 
     <title>Main</title> 
    </head> 
    <body> 
... 
    </body> 
</html>

출처

2012-10-20 02:18:28

다음 링크는 여기에 수직 활성화 비활성화 및 수평이다, 당신에게 유용 할 수 있습니다를, 당신은 단지에 대한 약간의 코드를 조정할 필요가 당신의 목적.

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

는 희망이 도움이 - 경우 jquery-tools-touch-horizontal-only-disable-vertical-touch

당신이 수직 슬라이딩에 대해 우려하지 않습니다, 당신은 또한 다음과 같은 코드를 시도 할 수 있습니다.

출처

2012-10-20 23:09:33

iOS WebApp에서 가로 스크롤 방지

답변

관련 문제