휴대 기기에서 스크롤 사용 안함

Question

간단한 HTML 페이지가 있습니다. div를 터치하면 스크롤 할 수 없습니다. 이 페이지를 찾을 수 있습니다 here

이 페이지를 firefox와 같은 데스크탑 브라우저에서 열면 div를 클릭하면 스크롤 할 수 없습니다.

이제 모바일에서 Android와 같은 동작을 원합니다. 사실 Android에서이 페이지를 열면 어떤 경우든지 스크롤 할 수 있습니다. 내 예제의 색상 죄송

)

Answer 1

난 당신이 모바일 장치에서 스크롤을 사용하지 않도록 설정하는 방법을 묻는 생각 :

당신은 touchstart 및 touchmove에 대한 이벤트 리스너를 추가 할 수 있습니다. 그런 다음 이러한 이벤트가 발생하면 Modernizr을 사용하여 브라우저가 터치 장치인지 여부를 감지합니다. 분명히 모든 모바일 장치가 터치 장치가 아니며 고해상도 터치 장치가 있으므로 추가하거나 if 문에 자유롭게 사용할 수 있습니다.

document.addEventListener('touchstart', this.touchstart); 
document.addEventListener('touchmove', this.touchmove); 

function touchstart(e) { 
    e.preventDefault() 
} 

function touchmove(e) { 
    e.preventDefault() 
} 

또는 단지 모더 나이저를 사용하고 CSS 사용

html.touch body { 
    overflow:hidden; 
} 

을 그리고 효과적으로이나 문을 가지고 미디어 쿼리를 추가합니다.