저는 브라우저 기반 앱에서 작업 중이며 현재 ipad safari 브라우저 용으로 개발 및 스타일링 중입니다.
ipad에서 두 가지를 찾고 있습니다. 필요하지 않은 페이지에 대해 세로 스크롤을 비활성화하려면 어떻게해야합니까? & Elastic Bounce 효과를 어떻게 비활성화 할 수 있습니까?
답변
매우 오래된 iOS 장치 용으로 개발하지 않는 한이 답변은 더 이상 적용되지 않습니다. 다른 솔루션을 참조하십시오.
2011 답변 : iOS Safari 내에서 실행되는 웹 / html 앱의 경우
document.ontouchmove = function(event){
event.preventDefault();
}
iOS 5의 경우 document.ontouchmove 및 iOS 5의 스크롤링 을 고려할 수 있습니다.
2014 년 9 월 업데이트 : https://github.com/luster-io/prevent-overscroll 에서보다 철저한 접근 방식을 찾을 수 있습니다 . 이것과 많은 유용한 웹앱 조언은 http://www.luster.io/blog/9-29-14-mobile-web-checklist.html을 참조하십시오 .
2016 년 3 월 업데이트 : 마지막 링크는 더 이상 활성화되지 않습니다. https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist 참조 대신 보관 된 버전의 경우 .html . 지적 해 주신 @falsarella에게 감사드립니다.
답변
body / html의 위치를 고정으로 변경할 수도 있습니다.
body,
html {
position: fixed;
}답변
최신 모바일 브라우저에서 스크롤을 방지하려면 passive : false를 추가해야합니다. 이 해결책을 찾을 때까지 나는 이것을 작동시키기 위해 머리카락을 뽑아 내고있었습니다. 나는 이것이 인터넷의 다른 한 곳에서만 언급 된 것을 발견했습니다.
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault);
}답변
이 jQuery 코드 조각을 사용하여 다음을 수행 할 수 있습니다.
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
이렇게하면 페이지에서 발생하는 수직 스크롤 및 바운스 백 효과를 차단합니다.
답변
overflow: scroll;
-webkit-overflow-scrolling: touch;
컨테이너에서 요소 내부에 바운스 효과를 설정할 수 있습니다.
출처 : http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
답변
나는 이것이 약간 오프 피스트라는 것을 알고 있지만 Swiffy를 사용하여 Flash를 대화 형 HTML5 게임으로 변환하고 동일한 스크롤 문제를 발견했지만 작동하는 솔루션을 찾지 못했습니다.
내가 가진 문제는 Swiffy 스테이지가 전체 화면을 차지하고있어서로드 되 자마자 문서 touchmove 이벤트가 트리거되지 않았다는 것입니다.
같은 이벤트를 Swiffy 컨테이너에 추가하려고하면 스테이지가로드되는 즉시 교체되었습니다.
결국 나는 스테이지 내의 모든 DIV에 touchmove 이벤트를 적용하여 문제를 해결했습니다. 이러한 div도 계속 변경되므로 계속 확인해야했습니다.
이것은 잘 작동하는 내 솔루션이었습니다. 나와 동일한 솔루션을 찾으려는 다른 사람에게 도움이 되었기를 바랍니다.
var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
'touchmove',
function(e) {
e.preventDefault();
}
);}
답변
ipad safari를 제거하려면 코드 : 스크롤링 비활성화 및 바운스 효과
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
문서 내부에 캔버스 태그 가있는 경우 캔버스 내부 개체의 사용성에 영향을 미칠 수 있습니다 (예 : 개체 이동). 따라서 아래 코드를 추가하여 수정하십시오.
document.getElementById("canvasId").addEventListener("touchmove", function (e) {
e.stopPropagation();
}, { passive: false });
