iPhone 웹 응용 프로그램에서 스크롤을 비활성화 하시겠습니까?

iPhone 웹 응용 프로그램에서 스크롤을 비활성화 하시겠습니까?

---

iPhone 웹 앱에서 웹 페이지 스크롤을 완전히 비활성화하는 방법이 있습니까? 나는 구글에 게시 된 수많은 것들을 시도했지만, 아무것도 작동하지 않는 것 같다.

내 현재 헤더 설정은 다음과 같습니다.

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

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

작동하지 않는 것 같습니다.

---

'self.webView.scrollView.bounces = 아니요;'

애플리케이션의 mainViewController.m 파일의 'viewDidLoad'에이 한 줄을 추가하면됩니다. Xcode에서 열고 추가 할 수 있습니다.

이렇게하면 고무줄 바운스가없는 페이지가 여전히 앱보기에서 스크롤을 활성화 할 수 있습니다.

---

touchstart대신 이벤트로 변경하십시오 touchmove. One Finger Events 아래 에는 팬 중에 이벤트가 전송되지 않으므로 touchmove너무 늦을 수 있습니다.

본문이 아닌 문서에 리스너를 추가했습니다.

예:

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

---

document.addEventListener('touchstart', function (e) {
    e.preventDefault();
});

ontouchmove실행중인 기존 이벤트 처리기를 덮어 쓸 위험이 있으므로 속성을 사용하여 이벤트 처리기를 등록 하지 마십시오 . 대신 addEventListener 를 사용하십시오 (MDN 페이지에서 IE에 대한 참고 참조).

또는 에서 touchstart이벤트의 기본값을 방지 하면 하강 영역의 스크롤이 비활성화됩니다.windowdocument

문서 스크롤을 방지하고 다른 모든 이벤트는 그대로 두려면 touchmove다음 첫 번째 이벤트에 대한 기본값을 방지합니다 touchstart.

var firstMove;

window.addEventListener('touchstart', function (e) {
    firstMove = true;
});

window.addEventListener('touchmove', function (e) {
    if (firstMove) {
        e.preventDefault();

        firstMove = false;
    }
});

이것이 작동하는 이유는 모바일 Safari가 문서의 본문이 스크롤되고 있는지 확인하기 위해 첫 번째 이동을 사용하기 때문입니다. 보다 정교한 솔루션을 고안하면서 이것을 깨달았습니다.

이것이 작동을 멈출 경우 더 정교한 해결책은 touchTarget요소와 그 부모 를 검사하고 스크롤 할 수있는 방향지도를 만드는 것입니다. 그런 다음 첫 번째 touchmove이벤트를 사용하여 스크롤 방향을 감지하고 문서 나 대상 요소 (또는 대상 요소 부모 중 하나)를 스크롤할지 확인합니다.

var touchTarget,
    touchScreenX,
    touchScreenY,
    conditionParentUntilTrue,
    disableScroll,
    scrollMap;

conditionParentUntilTrue = function (element, condition) {
    var outcome;

    if (element === document.body) {
        return false;
    }

    outcome = condition(element);

    if (outcome) {
        return true;
    } else {
        return conditionParentUntilTrue(element.parentNode, condition);
    }
};

window.addEventListener('touchstart', function (e) {
    touchTarget = e.targetTouches[0].target;
    // a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
    scrollMap = {}

    scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollLeft > 0;
    });

    scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollTop > 0;
    });

    scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollWidth > element.clientWidth &&
               element.scrollWidth - element.clientWidth > element.scrollLeft;
    });

    scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollHeight > element.clientHeight &&
               element.scrollHeight - element.clientHeight > element.scrollTop;
    });

    touchScreenX = e.targetTouches[0].screenX;
    touchScreenY = e.targetTouches[0].screenY;
    disableScroll = false;
});

window.addEventListener('touchmove', function (e) {
    var moveScreenX,
        moveScreenY;

    if (disableScroll) {
        e.preventDefault();

        return;
    }

    moveScreenX = e.targetTouches[0].screenX;
    moveScreenY = e.targetTouches[0].screenY;

    if (
        moveScreenX > touchScreenX && scrollMap.left ||
        moveScreenY < touchScreenY && scrollMap.bottom ||
        moveScreenX < touchScreenX && scrollMap.right ||
        moveScreenY > touchScreenY && scrollMap.top
    ) {
        // You are scrolling either the element or its parent.
        // This will not affect document.body scroll.
    } else {
        // This will affect document.body scroll.

        e.preventDefault();

        disableScroll = true;
    }
});

이것이 작동하는 이유는 모바일 Safari가 첫 번째 터치 이동을 사용하여 문서 본문이 스크롤되고 있는지 또는 요소 (또는 대상 요소 부모 중 하나)가이 결정을 고수하는지 확인하기 때문입니다.

---

jquery 1.7 이상을 사용하는 경우 잘 작동합니다.

$("donotscrollme").on("touchmove", false);

---

작동합니다. 더 이상 상단 또는 하단에 회색 영역이 없습니다.)

<script type="text/javascript">
   function blockMove() {
      event.preventDefault() ;
}
</script>

<body ontouchmove="blockMove()">

But this also disables any scrollable areas. If you want to keep your scrollable areas and still remove the rubber band effect at the top and bottom, see here: https://github.com/joelambert/ScrollFix.

---

Disable:

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

Enable:

document.ontouchstart = function(e){ return true; }

---

The page has to be launched from the Home screen for the meta tag to work.

---

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

is actually the best choice i found out it allows you to still be able to tap on input fields as well as drag things using jQuery UI draggable but it stops the page from scrolling.

---

I tried above answers and particularly Gajus's but none works. Finally I found the answer below to solve the problem such that only the main body doesn't scroll but other scrolling sections inside my web app all work fine. Simply set position fixed for your body:

body {

height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}

ReferenceURL : https://stackoverflow.com/questions/2890361/disable-scrolling-in-an-iphone-web-application