ฉันได้สร้างเว็บแอปพลิเคชัน HTML5 ขนาดเล็กสำหรับ บริษัท ของฉัน

แอปพลิเคชั่นนี้แสดงรายการสิ่งของและทุกอย่างทำงานได้ดี

แอปพลิเคชันส่วนใหญ่ใช้บนโทรศัพท์ Android และ Chrome เป็นเบราว์เซอร์ นอกจากนี้ไซต์จะถูกบันทึกไว้บนหน้าจอหลักเพื่อให้ Android จัดการทุกอย่างเป็นแอป ( ฉันเดาว่าใช้ WebView )

Chrome Beta (และฉันคิดว่า Android System WebView ด้วย)ได้เปิดตัวคุณลักษณะ "ดึงลงเพื่อรีเฟรช" ( ดูตัวอย่างลิงก์นี้ )

นี่เป็นคุณสมบัติที่มีประโยชน์ แต่ฉันสงสัยว่าสามารถปิดใช้งานด้วยเมตาแท็ก (หรือสิ่งที่จาวาสคริปต์) ได้หรือไม่เนื่องจากผู้ใช้สามารถเรียกการรีเฟรชได้อย่างง่ายดายในขณะที่นำทางรายการและแอปทั้งหมดจะถูกโหลดซ้ำ

นอกจากนี้ยังเป็นคุณสมบัติที่แอปพลิเคชันไม่ต้องการ

ฉันรู้ว่าฟีเจอร์นี้ยังใช้ได้เฉพาะใน Chrome เบต้า แต่ฉันรู้สึกว่านี่เชื่อมโยงไปถึงแอปที่เสถียรด้วย

ขอบคุณ!

แก้ไข: ฉันได้ถอนการติดตั้ง Chrome Beta แล้วตอนนี้ลิงก์ที่ตรึงไว้ที่หน้าจอหลักจะเปิดขึ้นพร้อมกับ Chrome ที่เสถียร ดังนั้นลิงก์ที่ตรึงไว้จึงเริ่มต้นด้วย Chrome ไม่ใช่จาก Webview

แก้ไข: วันนี้ (2015-03-19) การดึงลงเพื่อรีเฟรชมาถึง Chrome ที่เสถียรแล้ว

แก้ไข: จากคำตอบ @Evyn ฉันไปที่ลิงค์นี้และได้รับรหัส javascript / 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;
        }
    }
});

ตามที่ @bcintegrity ชี้ให้เห็นฉันหวังว่าจะมีโซลูชันรายการไซต์ (และ / หรือเมตาแท็ก) ในอนาคต

ข้อเสนอแนะเพิ่มเติมสำหรับโค้ดด้านบนยินดีต้อนรับ

การดำเนินการเริ่มต้นของเอฟเฟกต์แบบดึงเพื่อรีเฟรชสามารถป้องกันได้อย่างมีประสิทธิภาพโดยดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้:

1. preventDefault'ในบางส่วนของลำดับการสัมผัสรวมถึงสิ่งต่อไปนี้ (ตามลำดับที่ก่อกวนมากที่สุดถึงน้อยที่สุด):
   • ก. สตรีมแบบสัมผัสทั้งหมด (ไม่เหมาะ)
   • ข. การเลื่อนการเลื่อนด้านบนทั้งหมด
   • ค. ทัชมูฟแบบเลื่อนด้านบนตัวแรก
   • ง. การเลื่อนบนสุดครั้งแรกจะเลื่อนเฉพาะเมื่อ 1) ทัชสตาร์ตเริ่มต้นเกิดขึ้นเมื่อออฟเซ็ตการเลื่อนของเพจ y เป็นศูนย์และ 2) ทัชมูฟจะทำให้เกิดการโอเวอร์สโคปด้านบน
2. การใช้“ touch-action: none” กับองค์ประกอบที่กำหนดเป้าหมายการสัมผัสตามความเหมาะสมจะปิดใช้งานการทำงานเริ่มต้น (รวมถึงการดึงเพื่อรีเฟรช) ของลำดับการสัมผัส
3. ใช้“overflow-y: hidden ” กับองค์ประกอบของเนื้อหาโดยใช้ div สำหรับเนื้อหาที่เลื่อนได้หากจำเป็น
4. การปิดใช้งานเอฟเฟกต์ในเครื่องผ่านchrome://flags/#disable-pull-to-refresh-effect)

ดูเพิ่มเติม

วิธีง่ายๆสำหรับปี 2019+

Chrome 63 ได้เพิ่มคุณสมบัติ css เพื่อช่วยในเรื่องนี้ อ่านคู่มือนี้โดย Googleเพื่อรับแนวคิดที่ดีว่าคุณจะจัดการกับมันอย่างไร

นี่คือ TL: DR

คุณสมบัติ CSS overscroll-behavior ช่วยให้นักพัฒนาสามารถลบล้างพฤติกรรมการเลื่อนล้นเริ่มต้นของเบราว์เซอร์เมื่อไปถึงด้านบน / ล่างของเนื้อหา กรณีการใช้งานรวมถึงการปิดใช้งานคุณลักษณะดึงเพื่อรีเฟรชบนมือถือการลบการเรืองแสงแบบโอเวอร์สเกลและเอฟเฟกต์แถบยางและป้องกันไม่ให้เนื้อหาของหน้าเลื่อนเมื่ออยู่ภายใต้โมดอล / โอเวอร์เลย์

เพื่อให้มันใช้งานได้สิ่งที่คุณต้องเพิ่มคือสิ่งนี้ใน CSS ของคุณ:

body {
  overscroll-behavior: contain;
}

นอกจากนี้ยังเป็นเพียงการสนับสนุนโดย Chrome ขอบและ Firefox สำหรับตอนนี้ แต่ฉันแน่ใจว่า Safari จะเพิ่มเร็วที่สุดเท่าที่พวกเขาดูเหมือนจะได้รับอย่างเต็มที่ onboard กับพนักงานบริการและพนักงานในอนาคตของกปภ. ของ

ในขณะนี้คุณสามารถปิดใช้งานคุณสมบัตินี้ได้ทาง chrome: // flags / # disable-pull-to-refresh-effect - เปิดโดยตรงจากอุปกรณ์ของคุณ

คุณสามารถจับภาพtouchmoveเหตุการณ์ได้ แต่มีโอกาสน้อยมากที่จะได้ผลลัพธ์ที่ยอมรับได้

ฉันใช้ MooTools และฉันได้สร้างคลาสเพื่อปิดใช้งานการรีเฟรชองค์ประกอบเป้าหมาย แต่จุดสำคัญของมันคือ (ดั้งเดิม JS):

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

สิ่งที่เราทำต่อไปนี้คือค้นหาทิศทาง y ของทัชมูฟและหากเราเลื่อนหน้าจอลงและเป้าหมายเลื่อนเป็น 0 เราจะหยุดเหตุการณ์นั้น ดังนั้นไม่ต้องรีเฟรช

ซึ่งหมายความว่าเรากำลังยิงทุก 'การเคลื่อนไหว' ซึ่งอาจมีราคาแพง แต่เป็นทางออกที่ดีที่สุดที่ฉันพบจนถึงตอนนี้ ...

หลังจากพยายามหลายชั่วโมงวิธีนี้ใช้ได้ผลสำหรับฉัน

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

AngularJS

ฉันปิดการใช้งานสำเร็จด้วยคำสั่ง AngularJS นี้:

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

คุณสามารถหยุดดูได้ทันทีที่ผู้ใช้เลื่อนลงเนื่องจากการดึงเพื่อรีเฟรชไม่มีโอกาสที่จะถูกกระตุ้น

ในทำนองเดียวกันถ้าscrolltop > 0เหตุการณ์นั้นจะไม่ถูกทริกเกอร์ ในการดำเนินงานของฉันฉันผูกเหตุการณ์ touchmove บน touchstart scrollTop <= 0เฉพาะในกรณีที่ ฉันเลิกผูกทันทีที่ผู้ใช้เลื่อนลง ( initialY >= e.touches[0].clientY) หากผู้ใช้เลื่อนขึ้นไป ( previousY < e.touches[0].clientY) preventDefault()โทรแล้วฉัน

สิ่งนี้ช่วยให้เราไม่ต้องดูเหตุการณ์การเลื่อนโดยไม่จำเป็น แต่ก็บล็อกการเลื่อนมากเกินไป

jQuery

หากคุณใช้ jQuery นี่จะเทียบเท่ากับที่ยังไม่ได้ทดสอบ elementเป็นองค์ประกอบ 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);

โดยธรรมชาติแล้วสิ่งเดียวกันนี้สามารถทำได้ด้วย JS บริสุทธิ์

Javascript อย่างง่าย

ฉันใช้งานโดยใช้จาวาสคริปต์มาตรฐาน ง่ายและใช้งานง่าย เพียงแค่วางและใช้งานได้ดี

<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>

ทางออกที่ดีที่สุดสำหรับ CSS บริสุทธิ์:

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

ดูการสาธิตนี้: https://jsbin.com/pokusideha/quiet

คุณสามารถลองสิ่งนี้

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

ตัวอย่าง:

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

เอกสารฉบับเต็ม https://developers.google.com/web/updates/2017/11/overscroll-behavior

ฉันพบว่าการตั้งค่าCSS ร่างกายของคุณoverflow-y: hiddenเป็นวิธีที่ง่ายที่สุด หากคุณไม่ต้องการมีหน้าแอปพลิเคชันแบบเลื่อนคุณสามารถใช้คอนเทนเนอร์ div ที่มีคุณสมบัติการเลื่อนได้

โปรดทราบว่า overflow-y ไม่ได้รับการสืบทอดดังนั้นคุณต้องตั้งค่าในองค์ประกอบบล็อกทั้งหมด

คุณสามารถทำได้ด้วย jQuery เพียงแค่:

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

ตั้งแต่สองสามสัปดาห์ฉันพบว่าฟังก์ชันจาวาสคริปต์ที่ฉันใช้ปิดการดำเนินการรีเฟรช Chrome จะไม่ทำงานอีกต่อไป ฉันได้ทำสิ่งนี้เพื่อแก้ปัญหา:

$(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>

โซลูชัน Pure js

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

สิ่งที่ฉันทำคือเพิ่มต่อไปนี้ในtouchstartและtouchend/ touchcancelเหตุการณ์:

scrollTo(0, 1)

เนื่องจากโครเมี่ยมไม่เลื่อนหากไม่อยู่ในตำแหน่งเลื่อน Y 0สิ่งนี้จะป้องกันไม่ให้ chrome ทำการดึงเพื่อรีเฟรช

หากยังไม่ได้ผลให้ลองทำเช่นนั้นเมื่อโหลดหน้าเว็บ

ฉันแก้ไขปัญหาแบบดึงลงเพื่อรีเฟรชด้วยสิ่งนี้:

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