Saya telah membuat aplikasi web HTML5 kecil untuk perusahaan saya.

Aplikasi ini menampilkan daftar item dan semuanya berfungsi dengan baik.

Aplikasi ini terutama digunakan pada ponsel android dan Chrome sebagai browser. Selain itu, situs tersebut disimpan di layar beranda sehingga Android mengelola semuanya sebagai aplikasi ( saya kira menggunakan WebView ).

Chrome Beta (dan menurut saya juga Android System WebView) telah memperkenalkan fitur "pull down to refresh" ( Lihat tautan ini misalnya ).

Ini adalah fitur yang berguna tetapi saya bertanya-tanya apakah itu dapat dinonaktifkan dengan beberapa meta tag (atau barang javascript) karena penyegaran dapat dengan mudah dipicu oleh pengguna saat menavigasi daftar dan seluruh aplikasi dimuat ulang.

Juga ini adalah fitur yang tidak dibutuhkan oleh aplikasi.

Saya tahu bahwa fitur ini masih tersedia hanya di Chrome beta, tetapi saya merasa fitur ini juga tersedia di aplikasi stabil.

Terima kasih!

Sunting: Saya telah mencopot pemasangan Chrome Beta dan tautan yang disematkan ke layar beranda sekarang terbuka dengan Chrome yang stabil. Jadi tautan yang disematkan dimulai dengan Chrome dan bukan dengan tampilan web.

Sunting: hari ini (2015-03-19) pull-down-to-refresh telah datang ke chrome stabil.

Sunting: dari jawaban @Evyn Saya mengikuti tautan ini dan mendapatkan kode javascript / jquery yang berfungsi.

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;
        }
    }
});

Seperti yang ditunjukkan oleh @bcintegrity, saya berharap solusi nyata situs (dan / atau meta-tag) di masa mendatang.

Selain itu saran untuk kode di atas dipersilakan.

Tindakan default dari efek tarik-untuk-menyegarkan dapat dicegah secara efektif dengan melakukan salah satu hal berikut:

1. preventDefaultbeberapa bagian dari urutan sentuhan, termasuk salah satu dari berikut ini (dalam urutan dari yang paling mengganggu hingga paling tidak mengganggu):
   • Sebuah. Seluruh aliran sentuh (tidak ideal).
   • b. Semua gerakan sentuh overscrolling teratas.
   • c. Gerakan sentuh overscrolling teratas pertama.
   • d. Gerakan sentuh overscrolling pertama hanya ketika 1) touchstart awal terjadi ketika offset gulir halaman y nol dan 2) gerakan sentuh akan menyebabkan overscroll atas.
2. Menerapkan "touch-action: none " ke elemen target sentuh, jika sesuai, menonaktifkan tindakan default (termasuk tarik untuk menyegarkan) dari urutan sentuh.
3. Menerapkan "overflow-y: hidden " ke elemen tubuh, menggunakan div untuk konten yang dapat digulir jika perlu.
4. Menonaktifkan efek secara lokal melalui chrome://flags/#disable-pull-to-refresh-effect).

Lihat lebih banyak

Solusi sederhana untuk 2019+

Chrome 63 telah menambahkan properti css untuk membantu hal ini. Bacalah panduan dari Google ini untuk mendapatkan ide bagus tentang bagaimana Anda dapat menanganinya.

Ini TL mereka: DR

Properti CSS overscroll-behaviour memungkinkan pengembang untuk mengganti perilaku scroll overflow default browser saat mencapai bagian atas / bawah konten. Kasus penggunaan termasuk menonaktifkan fitur tarik-untuk-menyegarkan di ponsel, menghapus cahaya gulir berlebihan dan efek gosok, dan mencegah konten laman menggulir saat berada di bawah modal / hamparan.

Untuk membuatnya berfungsi, yang harus Anda tambahkan adalah ini di CSS Anda:

body {
  overscroll-behavior: contain;
}

Ini juga hanya didukung oleh Chrome, Edge dan Firefox untuk saat ini tetapi saya yakin Safari akan menambahkannya segera setelah mereka tampaknya sepenuhnya terintegrasi dengan pekerja layanan dan masa depan PWA.

Saat ini Anda hanya dapat menonaktifkan fitur ini melalui chrome: // flags / # disable-pull-to-refresh-effect - buka langsung dari perangkat Anda.

Anda dapat mencoba mengejar ketinggalan touchmove, tetapi kemungkinannya sangat kecil untuk mencapai hasil yang dapat diterima.

Saya menggunakan MooTools, dan saya telah membuat Kelas untuk menonaktifkan penyegaran pada elemen yang ditargetkan, tetapi intinya adalah (JS asli):

var target = window; // this can be any scrollable element
var last_y = 0;
target.addEventListener('touchmove', function(e){
    var scrolly = target.pageYOffset || target.scrollTop || 0;
    var direction = e.changedTouches[0].pageY > last_y ? 1 : -1;
    if(direction>0 && scrolly===0){
        e.preventDefault();
    }
    last_y = e.changedTouches[0].pageY;
});

Yang kita lakukan di sini adalah mencari arah y dari gerakan sentuh, dan jika kita bergerak ke bawah layar dan target scroll adalah 0, kita menghentikan kejadian tersebut. Jadi, tidak ada penyegaran.

Ini berarti kami melakukan setiap 'gerakan', yang bisa jadi mahal, tetapi merupakan solusi terbaik yang saya temukan sejauh ini ...

Setelah berjam-jam mencoba, solusi ini berhasil untuk saya

$("html").css({
    "touch-action": "pan-down"
});

AngularJS

Saya telah berhasil menonaktifkannya dengan direktif AngularJS ini:

//Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements.
angular.module('hereApp.directive').directive('noPullToReload', function() {
    'use strict';

    return {
        link: function(scope, element) {
            var initialY = null,
                previousY = null,
                bindScrollEvent = function(e){
                    previousY = initialY = e.touches[0].clientY;

                    // Pull to reload won't be activated if the element is not initially at scrollTop === 0
                    if(element[0].scrollTop <= 0){
                        element.on("touchmove", blockScroll);
                    }
                },
                blockScroll = function(e){
                    if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
                        e.preventDefault();
                    }
                    else if(initialY >= e.touches[0].clientY){ //Scrolling down
                        //As soon as you scroll down, there is no risk of pulling to reload
                        element.off("touchmove", blockScroll);
                    }
                    previousY = e.touches[0].clientY;
                },
                unbindScrollEvent = function(e){
                    element.off("touchmove", blockScroll);
                };
            element.on("touchstart", bindScrollEvent);
            element.on("touchend", unbindScrollEvent);
        }
    };
});

Aman untuk berhenti menonton segera setelah pengguna menggulir ke bawah, karena tarikan untuk menyegarkan tidak mungkin dipicu.

Begitu juga jika scrolltop > 0, acara tidak akan dipicu. Dalam implementasinya, saya mengikat event touchmove pada touchstart, hanya jika scrollTop <= 0. Saya melepaskannya segera setelah pengguna menggulir ke bawah ( initialY >= e.touches[0].clientY). Jika pengguna menggulir ke atas ( previousY < e.touches[0].clientY), maka saya memanggilpreventDefault() .

Ini menyelamatkan kita dari menonton acara gulir yang tidak perlu, namun memblokir overscrolling.

jQuery

Jika Anda menggunakan jQuery, ini adalah padanan yang belum teruji . elementadalah elemen jQuery:

var initialY = null,
    previousY = null,
    bindScrollEvent = function(e){
        previousY = initialY = e.touches[0].clientY;

        // Pull to reload won't be activated if the element is not initially at scrollTop === 0
        if(element[0].scrollTop <= 0){
            element.on("touchmove", blockScroll);
        }
    },
    blockScroll = function(e){
        if(previousY && previousY < e.touches[0].clientY){ //Scrolling up
            e.preventDefault();
        }
        else if(initialY >= e.touches[0].clientY){ //Scrolling down
            //As soon as you scroll down, there is no risk of pulling to reload
            element.off("touchmove");
        }
        previousY = e.touches[0].clientY;
    },
    unbindScrollEvent = function(e){
        element.off("touchmove");
    };
element.on("touchstart", bindScrollEvent);
element.on("touchend", unbindScrollEvent);

Secara alami, hal yang sama juga bisa dicapai dengan JS murni.

Javascript sederhana

Saya menerapkan menggunakan javascript standar. Sederhana dan mudah diterapkan. Cukup tempel dan berfungsi dengan baik.

<script type="text/javascript">         //<![CDATA[
     window.addEventListener('load', function() {
          var maybePreventPullToRefresh = false;
          var lastTouchY = 0;
          var touchstartHandler = function(e) {
            if (e.touches.length != 1) return;
            lastTouchY = e.touches[0].clientY;
            // Pull-to-refresh will only trigger if the scroll begins when the
            // document's Y offset is zero.
            maybePreventPullToRefresh =
                window.pageYOffset == 0;
          }

          var touchmoveHandler = function(e) {
            var touchY = e.touches[0].clientY;
            var touchYDelta = touchY - lastTouchY;
            lastTouchY = touchY;

            if (maybePreventPullToRefresh) {
              // To suppress pull-to-refresh it is sufficient to preventDefault the
              // first overscrolling touchmove.
              maybePreventPullToRefresh = false;
              if (touchYDelta > 0) {
                e.preventDefault();
                return;
              }
            }
          }

          document.addEventListener('touchstart', touchstartHandler, false);
          document.addEventListener('touchmove', touchmoveHandler, false);      });
            //]]>    </script>

Solusi terbaik untuk CSS murni:

body {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: -1px;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}
#pseudobody {
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    z-index: 2;
    margin: 0;
    padding:0;
    overflow-y: auto;
}

Lihat demo ini: https://jsbin.com/pokusideha/quiet

Anda bisa mencobanya

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

contoh:

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

dokumen lengkap https://developers.google.com/web/updates/2017/11/overscroll-behavior

Saya menemukan pengaturan CSS tubuh Anda overflow-y: hidden adalah cara termudah. Jika Anda memang ingin memiliki halaman aplikasi scrolling, Anda bisa menggunakan wadah div dengan fitur scrolling.

Perhatikan bahwa overflow-y tidak diwariskan, jadi Anda perlu menyetelnya di SEMUA elemen blok.

Anda dapat melakukan ini dengan jQuery hanya dengan:

        $(document.body).css('overflow-y', 'hidden'); 
        $('*').filter(function(index) {
            return $(this).css('display') == 'block';
        }).css('overflow-y', 'hidden');

Sejak beberapa minggu saya menemukan bahwa fungsi javascript yang saya gunakan untuk menonaktifkan tindakan penyegaran Chrome tidak akan berfungsi lagi. Saya telah membuat ini untuk menyelesaikannya:

$(window).scroll(function() {
   if ($(document).scrollTop() >= 1) {
      $("html").css({
         "touch-action": "auto"}
      );
   } else {
      $("html").css({
         "touch-action": "pan-down"
      });
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Solusi js murni.

// Prevent pull refresh chrome
    var lastTouchY = 0;
    var preventPullToRefresh = false;
    window.document.body.addEventListener("touchstart", function(e){
        if (e.touches.length != 1) { return; }
        lastTouchY = e.touches[0].clientY;
        preventPullToRefresh = window.pageYOffset == 0;
    }, false);

    window.document.body.addEventListener("touchmove", function(e){

        var touchY = e.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;
            }
        }

    }, false);

Apa yang saya lakukan adalah menambahkan yang berikut ke touchstartdan touchend/ touchcancelperistiwa:

scrollTo(0, 1)

Karena chrome tidak menggulir jika tidak dalam posisi scrollY, 0ini akan mencegah chrome melakukan tarik untuk menyegarkan.

Jika masih tidak berhasil, coba lakukan juga saat halaman dimuat.

Saya memecahkan masalah pull-down-to-refresh dengan ini:

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