모든 모바일 장치에서 스크롤 사용 안 함

모든 모바일 장치에서 스크롤 사용 안 함

이것은 인터넷 전체에 해결책이 있어야 할 것처럼 들리는데, 왜 찾을 수 없는지 잘 모르겠습니다.모바일 기기에서 가로 스크롤을 비활성화하고 싶습니다.기본적으로 이를 달성하기 위해 노력하고 있습니다.

body{
   overflow-x:hidden  // disable horizontal scrolling.
}

관련 정보일 수 있습니다.또한 사용자가 다음을 확대/축소할 수 없기 때문에 헤드 태그에 이 기능이 있습니다.

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

감사해요.

html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

직위가 중요한데, 저는 그냥 그 일에 대해 비틀거렸습니다.그것 없이는 작동할 수 없었습니다.

cg벡터의 대답은 제게 통하지 않았지만, 이것은 효과가 있었습니다.

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

그렇게 놔두지는 않겠지만, 스크롤 방지 시점을 선택하려면 더 똑똑한 논리가 필요하지만, 좋은 출발입니다.

여기서 촬영: iPhone 웹 애플리케이션에서 스크롤을 사용하지 않도록 설정하시겠습니까?

미래 세대를 위해:

스크롤은 방지하고 상황에 맞는 메뉴는 유지하려면 다음을 수행합니다.

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

여전히 일부 사용자가 원하는 것보다 훨씬 더 많이 방지할 수 있지만 대부분의 브라우저에서 방지할 수 있는 기본 동작은 스크롤뿐입니다.

스크롤할 수 없는 본체 내에서 스크롤 가능한 요소를 허용하고 고무줄을 방지하는 보다 정교한 솔루션에 대해서는 여기에서 제 답변을 살펴보세요.

https://stackoverflow.com/a/20250111/1431156

대부분의 사람들이 앱과 같은 경험을 만들기 위해 줌/스크롤을 비활성화하고 싶어하는 것은 아닐까 생각합니다. 왜냐하면 답에는 줌과 스크롤 모두에 대한 해결책 요소가 포함되어 있는 것 같지만, 아무도 그 중 하나를 제대로 못 박지 않았기 때문입니다.

스크롤

OP에 대답하려면 스크롤을 비활성화하기 위해 필요한 것은 창을 가로채는 것뿐입니다.scroll그리고.touchmove행사와 전화preventDefault그리고.stopPropagation그들이 만들어낸 사건들에 관하여; 그렇게.

window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);

function preventMotion(event)
{
    window.scrollTo(0, 0);
    event.preventDefault();
    event.stopPropagation();
}

그리고 당신의 스타일시트에는 당신의body그리고.html태그는 다음과 같습니다.

html:
{
    overflow: hidden;
}

body
{
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

줌잉

그러나 스크롤은 한 가지이지만 줌도 비활성화할 수 있습니다.마크업에서 메타 태그를 사용하여 수행할 작업:

<meta name="viewport" content="user-scalable=no" />

이 모든 것을 종합하면 아마도 캔버스에 가장 적합한 앱과 같은 경험을 할 수 있습니다.

(일부에서 다음과 같은 속성을 추가하라는 조언을 주의하십시오.initial-scale그리고.width캔버스를 사용하는 경우 메타 태그로 이동합니다. 왜냐하면 캔버스는 블록 요소와 달리 콘텐츠의 크기를 조정하기 때문입니다. 그러면 보기 흉한 캔버스가 생성되는 경우가 더 많습니다.

추가해 보기

html {
  overflow-x: hidden;
}

게다가

body {
  overflow-x: hidden;
}

페이지 머리글에 추가

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

페이지 스타일시트에서 추가

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

그것은 html과 body 둘다 입니다!

이것을 멋대로 쓰다.

body
{
overflow:hidden;
width:100%;
}

헤드 태그에 사용합니다.

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

CSS 속성 터치 동작은 일부 대상 브라우저에서는 작동하지 않을 수 있지만 원하는 것을 얻을 수 있습니다.

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    touch-action: none;
}

모든 답변을 시도해 보지 못한 저는 간단히 다음을 추가하여 모바일 스크롤을 끌 수 있었습니다.

html,
body {
  overflow-x: hidden;
  height: 100%;
}

body {
  position: relative;
}

사용하는 것이 중요합니다.%것은 아니다.vh이거는. 더.height: 100%내가 줄곧 그리워했던 것들이었어요, 미친.

상대에게 위치를 설정하는 것은 저에게는 통하지 않습니다.차체 위치를 고정으로 설정한 경우에만 작동합니다.

document.body.style.position = "fixed";
document.body.style.overflowY = "hidden";
document.body.addEventListener('touchstart', function(e){ e.preventDefault()});

이것은 저에게 효과가 있습니다.

window.addEventListener("touchstart", function(event){
             if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){
                     event.preventDefault();
             }
} ,false);

100% 작동하지 않으며 다음 내용도 추가했습니다.

window.addEventListener("scroll",function(){
    window.scrollTo(0,0)
},false)

Apple 장치의 경우position: relative작동하지 않습니다.다음 코드는 모든 장치에서 작동합니다.

html, body {
  overflow: hidden;
  position: fixed;
}

파티에 늦었지만, 제가 시도한 다른 어떤 것도 저의 구체적인 상황에서 효과가 없었기 때문에 이 답변을 덧붙입니다.캡처 터치 무브, 스크롤 등 이벤트의 조합은 효과가 없었고, 위치: 상대적인 본체가 모든 것을 사라지게 만들었습니다.

HTML과 BODY 요소에 높이를 100% 추가해야 한다는 것을 알았습니다.아래의 규칙들이 모두 필요한 것은 아니지만, 이 마법 조합을 우연히 발견하는 데 시간이 충분히 걸렸고, 효과가 있는 것으로 보입니다.

html {
    height: 100%;
    overflow: hidden;
}
body{
    margin: 0;
    overflow: hidden;
    height: 100%;
    position: relative;
}

이 외에도 HTML 헤드에는 다음과 같은 내용이 포함되어 있었습니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

제 앱은 절대 위치 요소를 많이 사용했는데, 그 중 일부는 시야 밖으로 미끄러지면서 다른 시간에 부분적으로 화면이 꺼졌습니다.결과적으로, 신체 요소는 신체에 어떤 면적/크기를 부여하기 위한 내용물이 없었습니다.

모바일 기기에서 발생하는 '스크롤링'은 브라우저가 뷰포트(장치 폭으로의 스케일링) 계산을 하기 위해 페이지 크기의 정도를 알지 못한 결과라는 것을 알게 되었습니다.0px 높이의 본체가 페이지의 높이나 폭 중 어느 하나도 브라우저에 전달하지 못하고 있었던 것 같아, 본체의 높이를 100%로 설정하는 것이 해결책의 핵심이었습니다.

편집: 제 해결책을 찾은 후에 답변을 다시 살펴보니, "톰스 코더리"의 다른 답변이 비록 그의 x 방향으로만 되어 있지만 본질적으로 제 해결책과 동일하다는 것을 깨달았습니다.

CSS 코드만 있으면 거의 단순하게 진행되는 가장 간단한 방법:

body, html {
    overflow-x: hidden;
    position: relative;
}

제가 모든 기기를 테스트한 것은 아니지만 다음과 같은 것이 가능합니다 :-)

$('body, html').css('overflow-y', 'hidden');
$('html, body').animate({
    scrollTop:0
}, 0);

언급URL : https://stackoverflow.com/questions/10592411/disable-scrolling-in-all-mobile-devices