안드로이드의 크롬 당겨서 새로고침 기능 비활성화하기

Stack Overflow에 자주 검색, 등록되는 문제들과 제가 개발 중 찾아 본 문제들 중에서 나중에도 찾아 볼 것 같은 문제들을 정리하고 있습니다.

Stack Overflow에서 가장 먼저 확인하게 되는 가장 높은 점수를 받은 Solution과 현 시점에 도움이 될 수 있는 가장 최근에 업데이트(최소 점수 확보)된 Solution을 각각 정리하였습니다.

 

아래 word cloud를 통해 이번 포스팅의 주요 키워드를 미리 확인하세요.

Disabling android's chrome pull-down-to-refresh feature

안드로이드의 크롬 당겨서 새로고침 기능을 비활성화하기

 문제 내용 

I've created a small HTML5 web application for my company.

우리 회사를 위해 작은 HTML5 웹 어플리케이션을 만들었습니다.

 

This application displays a list of items and everything works fine.

이 어플리케이션은 항목 리스트를 표시하며 모든 것이 잘 작동합니다.

 

The application is mainly used on android phones and Chrome as browser. Also, the site is saved on the home screen so Android manage the whole thing as an app (using a WebView I guess).

이 어플리케이션은 주로 안드로이드 전화기에서 Chrome 브라우저를 사용하여 작동합니다. 또한, 이 사이트는 홈 화면에 저장되어 Android에서 WebView를 사용하여 전체를 앱으로 관리합니다.

 

Chrome Beta (and I think also the Android System WebView) has introduced a "pull down to refresh" feature (See this link for example).

크롬 베타 버전 (그리고 안드로이드 시스템 WebView도 같은 기능인 것 같습니다)에서는 "당겨서 새로고침" 기능이 추가되었습니다. (예를 들어 이 링크를 참조하세요.)

 

This is an handy feature but I was wondering if it can be disabled with some meta tag (or javascript stuff) because the refresh can be easily triggered by the user while navigating the list and the whole app is reloaded.

이 기능은 편리하지만 사용자가 목록을 탐색하는 동안 쉽게 새로 고침이 트리거될 수 있으며 전체 앱이 다시 로드될 수 있기 때문에 메타 태그 (또는 자바 스크립트)를 사용하여 비활성화 할 수 있는지 궁금합니다.

 

Also this is a feature not needed by the application.

또한, 이것은 애플리케이션에서 필요하지 않은 기능입니다.

 

I know that this feature is still available only in Chrome beta, but I have the sensation that this is landing on the stable app, too.

이 기능이 아직 Chrome 베타에서만 사용 가능하다는 것은 알고 있지만, 안정적인 앱에서도 이 기능이 적용될 것 같은 느낌이 듭니다.

 

Thank you!

감사합니다!

 

Edit: I've uninstalled Chrome Beta and the link pinned to the home screen now opens with the stable Chrome. So the pinned links starts with Chrome and not with a webview.

수정: Chrome Beta를 삭제하고 Home 화면에 고정된 링크는 이제 안정 버전의 Chrome에서 열립니다. 따라서 고정된 링크는 WebView 대신 Chrome에서 시작됩니다.

 

Edit: today (2015-03-19) the pull-down-to-refresh has come to the stable chrome.

수정: 오늘(2015-03-19) 안정 버전 크롬에서 당겨서 새로고침이 추가되었습니다.

 

Edit: from @Evyn answer I follow this link and got this javascript/jquery code that work.

수정: @Evyn의 답변에서 제공한 링크를 따라가서 작성된 이 자바스크립트/jQuery 코드가 동작했습니다.

var lastTouchY = 0;
var preventPullToRefresh = false;

$('body').on('touchstart', function (e) {
    if (e.originalEvent.touches.length != 1) { return; }
    lastTouchY = e.originalEvent.touches[0].clientY;
    preventPullToRefresh = window.pageYOffset == 0;
});

$('body').on('touchmove', function (e) {
    var touchY = e.originalEvent.touches[0].clientY;
    var touchYDelta = touchY - lastTouchY;
    lastTouchY = touchY;
    if (preventPullToRefresh) {
        // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove.
        preventPullToRefresh = false;
        if (touchYDelta > 0) {
            e.preventDefault();
            return;
        }
    }
});

 

As @bcintegrity pointed out, I hope for a site manifest solution (and/or a meta-tag) in the future.

@bcintegrity님이 가리키신 대로, 저는 미래에 사이트 매니페스트 솔루션과/또는 메타 태그를 희망한다.

 

Moreover suggestions for the code above are welcome.

또한 위의 코드에 대한 제안은 환영합니다.

 

 

 

 높은 점수를 받은 Solution 

The default action of the pull-to-refresh effect can be effectively prevented by doing any of the following :

"Pull-to-refresh" 효과의 기본 작업은 다음 중 하나를 수행하여 효과적으로 방지할 수 있습니다:

 

1. preventDefault’ing some portion of the touch sequence, including any of the following (in order of most disruptive to least disruptive):
   • a. The entire touch stream (not ideal).
   • b. All top overscrolling touchmoves.
   • c. The first top overscrolling touchmove.
   • d. The first top overscrolling touchmove only when 1) the initial touchstart occurred when the page y scroll offset was zero and 2) the touchmove would induce top overscroll.
2. Applying “touch-action: none” to touch-targeted elements, where appropriate, disabling default actions (including pull-to-refresh) of the touch sequence.
3. Applying “overflow-y: hidden” to the body element, using a div for scrollable content if necessary.
4. Disabling the effect locally via chrome://flags/#disable-pull-to-refresh-effect).

1. ‘preventDefault’를 이용하여 다음 중 어떤 부분을 포함하여 터치 시퀀스의 기본 작업을 효과적으로 방지할 수 있습니다. (가장 방해적인 순서대로 나열함):
    a. 전체 터치 스트림 (좋지 않음).
    b. 모든 상단 오버스크롤 터치 이동.
    c. 첫 번째 상단 오버스크롤 터치 이동.
    d. 첫 번째 상단 오버스크롤 터치 이동이 1) 페이지 y 스크롤 오프셋이 0인 경우의 초기 터치 스타트와 2) 터치 이동이 상단 오버스크롤을 유발 할 때만.

2. 터치 대상 요소에 대해 적절한 경우 "touch-action: none"을 적용하여 터치 작업(풀 투 리프레시를 포함한)을 비활성화합니다.

3. 필요한 경우 body 요소에 "overflow-y: hidden"을 적용하고 스크롤 가능한 콘텐츠를 위해 div를 사용합니다.

4. chrome://flags/#disable-pull-to-refresh-effect)를 통해 지역적으로 이 효과를 비활성화합니다.

 

See more

더 보기

 

 

 

 가장 최근 달린 Solution 

You can try this

이것을 시도해볼 수 있습니다.

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

 

example :

이것을 시도해볼 수 있습니다.

 

https://ebidel.github.io/demos/chatbox.html

 

full doc https://developers.google.com/web/updates/2017/11/overscroll-behavior

전체 개발자 문서 https://developers.google.com/web/updates/2017/11/overscroll-behavior

 

 

 

출처 : https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature