답변:
매우 오래된 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에게 감사드립니다.
onTouchMove: function(e) { e.stopPropagation(); e.stopImmediatePropagation(); } 려면 이벤트가 몸에 닿는 것을 방지하지만 몸은 탄력이없는 상태로 유지됩니다. 편집 : 이것은 $ ( 'div'). on ( 'touchmove', ... onTouchMove);
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);
}{ passive: false }확실히 작동하지 않습니다 !!! StackOverflow 친구에 오신 것을 환영합니다
overflow-y: scroll어떻게해야합니까? 예를 들어, 본체보다 뷰 높이가 더 높은 모달이 있습니다.
이 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/
overflow:hidden온 <body>이 여전히 최고의 솔루션입니다. 그러나 키보드를 열거 나 화면 하단을 미끄러지면 더 이상 작동하지 않습니다.
나는 이것이 약간 오프 피스트라는 것을 알고 있지만 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 });
var xStart, yStart = 0;
document.addEventListener('touchstart', function(e) {
xStart = e.touches[0].screenX;
yStart = e.touches[0].screenY;
});
document.addEventListener('touchmove', function(e) {
var xMovement = Math.abs(e.touches[0].screenX - xStart);
var yMovement = Math.abs(e.touches[0].screenY - yStart);
if((yMovement * 3) > xMovement) {
e.preventDefault();
}
});
터치 이벤트 리스너를 분리하지 않고 기본 Safari 스크롤 및 바운스 제스처를 방지합니다.
어떤 솔루션도 나를 위해 작동하지 않습니다. 이것이 내가하는 방법이다.
html,body {
position: fixed;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
iPhone에서 테스트되었습니다. 대상 요소 컨테이너에서이 CSS를 사용하면 스크롤 동작이 변경되어 손가락이 화면을 떠날 때 중지됩니다.
-webkit-overflow-scrolling: auto
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
스크롤 방지를 위해 js를 사용할 수 있습니다.
let body = document.body;
let hideScroll = function(e) {
e.preventDefault();
};
function toggleScroll (bool) {
if (bool === true) {
body.addEventListener("touchmove", hideScroll);
} else {
body.removeEventListener("touchmove", hideScroll);
}
}
그리고 toggleScroll모달을 조작 / 닫을 때 단순히 실행 / 중지하는 것보다 .
이렇게 toggleScroll(true) / toggleScroll(false)
(iOS 전용이며 Android에서는 작동하지 않음)
webkitOverflowScrolling스타일 을 전환하는이 JS 솔루션을 사용해보십시오 . 여기서 트릭은이 스타일이 꺼져 있고, 모바일 Safari가 일반 스크롤로 이동하고 오버 바운스를 방지한다는 것입니다. 아아, 진행중인 드래그를 취소 할 수 없습니다. 이 복잡한 솔루션은 또한 onscroll정상 위로 바운스 scrollTop가 추적 될 수있는 네거티브를 만드는 것으로 추적합니다. 이 솔루션은 iOS 12.1.1에서 테스트되었으며 단일 단점이 있습니다. 스크롤 속도를 높이는 동안 스타일을 재설정하면 즉시 취소되지 않을 수 있으므로 단일 오버 바운스가 여전히 발생합니다.
function preventScrollVerticalBounceEffect(container) {
setTouchScroll(true) //!: enable before the first scroll attempt
container.addEventListener("touchstart", onTouchStart)
container.addEventListener("touchmove", onTouch, { passive: false })
container.addEventListener("touchend", onTouchEnd)
container.addEventListener("scroll", onScroll)
function isTouchScroll() {
return !!container.style.webkitOverflowScrolling
}
let prevScrollTop = 0, prevTouchY, opid = 0
function setTouchScroll(on) {
container.style.webkitOverflowScrolling = on ? "touch" : null
//Hint: auto-enabling after a small pause makes the start
// smoothly accelerated as required. After the pause the
// scroll position is settled, and there is no delta to
// make over-bounce by dragging the finger. But still,
// accelerated content makes short single over-bounce
// as acceleration may not be off instantly.
const xopid = ++opid
!on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)
if(!on && container.scrollTop < 16)
container.scrollTop = 0
prevScrollTop = container.scrollTop
}
function isBounceOverTop() {
const dY = container.scrollTop - prevScrollTop
return dY < 0 && container.scrollTop < 16
}
function isBounceOverBottom(touchY) {
const dY = touchY - prevTouchY
//Hint: trying to bounce over the bottom, the finger moves
// up the screen, thus Y becomes smaller. We prevent this.
return dY < 0 && container.scrollHeight - 16 <=
container.scrollTop + container.offsetHeight
}
function onTouchStart(e) {
prevTouchY = e.touches[0].pageY
}
function onTouch(e) {
const touchY = e.touches[0].pageY
if(isBounceOverBottom(touchY)) {
if(isTouchScroll())
setTouchScroll(false)
e.preventDefault()
}
prevTouchY = touchY
}
function onTouchEnd() {
prevTouchY = undefined
}
function onScroll() {
if(isTouchScroll() && isBounceOverTop()) {
setTouchScroll(false)
}
}
}
@Ben Bos 답변 개선 및 @Tim 댓글
이 CSS는 위치가 변경되거나 너비와 높이없이 약간 지연되기 때문에 CSS 다시 렌더링으로 스크롤 및 성능 문제를 방지하는 데 도움이됩니다.
body,
html {
position: fixed;
width: 100%;
height: 100%
}
사파리 바운스 스크롤 효과 비활성화 :
html,
body {
height: 100%;
width: 100%;
overflow: auto;
position: fixed;
}
테스트 된 솔루션, iOS 12.x에서 작동
이것은 내가 만난 문제입니다.
<body> <!-- the whole body can be scroll vertically -->
<article>
<my_gallery> <!-- some picture gallery, can be scroll horizontally -->
</my_gallery>
</article>
</body>갤러리를 스크롤하는 동안 본문은 항상 자체 스크롤 (인간 스 와이프가 실제로 수평이 아님)하여 갤러리를 쓸모 없게 만듭니다.
내 갤러리가 스크롤을 시작하는 동안 내가 한 작업은 다음과 같습니다.
var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari그리고 내 갤러리가 스크롤을 끝내면 ...
var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}도움이 되었기를 바랍니다 ~