135

मैंने अपनी कंपनी के लिए एक छोटा HTML5 वेब एप्लिकेशन बनाया है।

यह एप्लिकेशन मदों की एक सूची प्रदर्शित करता है और सब कुछ ठीक काम करता है।

एप्लिकेशन को मुख्य रूप से एंड्रॉइड फोन और क्रोम पर ब्राउज़र के रूप में उपयोग किया जाता है। इसके अलावा, साइट को होम स्क्रीन पर सहेजा जाता है, इसलिए एंड्रॉइड पूरी चीज़ को एक ऐप के रूप में प्रबंधित करता है ( ~~वेबव्यू मुझे लगता है~~ )।

क्रोम ~~बीटा (और मुझे लगता है कि एंड्रॉइड सिस्टम वेबव्यू भी)~~ ने "पुल टू रिफ्रेश" फीचर पेश किया है ( उदाहरण के लिए यह लिंक देखें )।

यह एक आसान सुविधा है, लेकिन मैं सोच रहा था कि क्या इसे कुछ मेटा टैग (या जावास्क्रिप्ट सामान) के साथ अक्षम किया जा सकता है क्योंकि सूची को नेविगेट करते समय उपयोगकर्ता द्वारा ताज़ा आसानी से ट्रिगर किया जा सकता है और पूरे ऐप को पुनः लोड किया जाता है।

इसके अलावा, यह एक ऐसी सुविधा है, जिसके लिए आवेदन की जरूरत नहीं है।

मुझे पता है कि यह सुविधा अभी भी केवल क्रोम बीटा में उपलब्ध है, लेकिन मुझे यह अनुभूति है कि यह स्थिर ऐप पर भी उतर रहा है।

धन्यवाद!

संपादित करें: मैंने Chrome बीटा की स्थापना रद्द कर दी है और होम स्क्रीन पर पिन किया गया लिंक अब स्थिर Chrome के साथ खुलता है। तो पिन किए गए लिंक क्रोम के साथ शुरू होते हैं न कि किसी वेबव्यू के साथ।

संपादित करें: आज (2015-03-19) पुल-डाउन-रिफ्रेश स्थिर क्रोम में आ गया है।

संपादित करें: @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;
        }
    }
});

स्निपेट का विस्तार करें

जैसा कि @bcintegrity ने बताया, मुझे भविष्य में साइट के प्रकट समाधान (और / या मेटा-टैग) की उम्मीद है।

उपरोक्त कोड के अतिरिक्त सुझाव स्वागत योग्य हैं।

— Sebastiano
स्रोत

18

हाँ, यह वास्तव में बेकार है। फार्म के मध्य में था और बहुत ऊपर तक स्क्रॉल किया गया था और यह ताज़ा हो गया और सब कुछ खो दिया। यह एक मंद डिफ़ॉल्ट सुविधा है, अगर मैं ताज़ा करना चाहता हूं तो मैं ताज़ा करें आइकन पर क्लिक करता हूं!

— ब्रॉक हेंसले

12

अच्छा होगा यदि यह सुविधा मेरे वेब ऐप मेनिफ़ेस्ट में अक्षम हो सकती है। दुर्भाग्य से, मेरे वेब ऐप के प्रत्येक पृष्ठ में स्क्रॉल करने योग्य सामग्री है, जिससे ताज़ा किए बिना नेविगेट करना लगभग असंभव है। मैं थोड़ा टिक गया हूं। : /

— bcintegrity

यह अच्छी जानकारी है। मैं उन वेब साइटों से नफरत करता हूं जो पुल को ताज़ा करने की सुविधा को अक्षम करती हैं। मैं पृष्ठ सामग्री की परवाह किए बिना ताज़ा कार्य करने के लिए एक सुविधा विकसित करना चाहूंगा।

— एलएस

5

एक वेब डेवलपर के रूप में बोलते हुए, पुलडाउन रिफ्रेश डेटा-संचालित वेबसाइटों के साथ असंगत है, क्योंकि यह एप्लिकेशन को पुनः लोड करता है। यह एक उपयोगकर्ता के लिए पूरे पृष्ठ को ताज़ा किए बिना किसी पृष्ठ के शीर्ष पर स्क्रॉल करना असंभव बनाता है। मैं क्रोम का 100% समर्थक हूं, आशा है कि वे इस विरोधी सुविधा को हटा देंगे।

— बीन्स

3

मैंने अपने आप को इस GC "फीचर" के साथ सामना किया ... बहुत सारे वेब पेज, कई रूप, एक लापरवाह मेरी उंगली के साथ नीचे खींचते हैं और इस पृष्ठ पर डेटा खो जाते हैं! रिटार्ड फ़ंक्शन IMO। यह डिफ़ॉल्ट रूप से बंद होना चाहिए, जिन्हें इसकी आवश्यकता है तो इसे कोड दें। मैं दिनों से सोचता था कि मेरे "क्लाइंट" कभी-कभी जीसी पर अपना डेटा क्यों खो देते हैं ...

— लुडस एच

157

पुल-टू-रिफ्रेश प्रभाव की डिफ़ॉल्ट क्रिया को निम्न में से कोई भी करके प्रभावी ढंग से रोका जा सकता है:

preventDefaultस्पर्श क्रम के कुछ भाग को सम्मिलित करें, जिसमें निम्न में से कोई भी शामिल है (कम से कम विघटनकारी के लिए सबसे अधिक विघटनकारी के क्रम में):
- ए। संपूर्ण स्पर्श धारा (आदर्श नहीं)।
- ख। सभी शीर्ष ओवरक्रोलिंग टचमोव।
- सी। पहले शीर्ष ओवरक्रोलिंग टचमोव।
- घ। पहला शीर्ष ओवरस्क्रोलिंग टचमव केवल जब 1) प्रारंभिक टचस्टार्ट तब हुआ जब पेज वाई स्क्रॉल ऑफ़सेट शून्य और 2 था) टचमोव टॉप ओवरक्रोल को प्रेरित करेगा।
touch-action: noneस्पर्श-लक्षित तत्वों के लिए " " लागू करना , जहाँ उपयुक्त, स्पर्श अनुक्रम के डिफ़ॉल्ट कार्यों (पुल-टू-रिफ्रेश सहित) को अक्षम करना।
overflow-y: hiddenयदि आवश्यक हो तो स्क्रॉल करने योग्य सामग्री के लिए एक div का उपयोग करते हुए, शरीर के तत्व के लिए " " लागू करना।
के माध्यम से स्थानीय रूप से प्रभाव को निष्क्रिय करना chrome://flags/#disable-pull-to-refresh-effect)।

और देखें

— Evyn
स्रोत

12

साभार @Evyn मैं विश्वास नहीं कर सकता यह एक त्वरित फिक्स था! मैंने बॉडी एलिमेंट के लिए CSS को ओवरफ्लो-y: हिडन में सेट किया है।

— bcintegrity

धन्यवाद @ ईविन, मैंने निवारण () विधि (प्रथम बिंदु) का उपयोग करने का निर्णय लिया है। विशेष रूप से मैंने लिंक ( लिंक ) के स्रोत कोड को दिलचस्प पाया है जो आपके द्वारा लिंक किए गए दस्तावेज़ के अंदर है। मैं अपने प्रश्न के अंत में कोड डालूँगा।

— सेबेस्टियानो

2

कैसे "क्रोम: // झंडे (अक्षम-पुल-से-ताज़ा-प्रभाव)" प्रोग्राम किया जाता है?

— किसी ने

2

@SomeoneSomewhere के रूप में मुझे पता है, इसकी असंभव नहीं है। क्रोम सेटिंग्स केवल उपयोगकर्ता द्वारा निर्धारित किया जा सकता है - यह अन्यथा एक सुरक्षा जोखिम पैदा करेगा

— माइक

1

स्क्रोल करने योग्य सामग्री के लिए एक div का उपयोग करके, शरीर के तत्व के लिए "अतिप्रवाह-य: छिपी" को लागू करना।

— रॉबिन

103

2019+ के लिए सरल समाधान

Chrome 63 ने वास्तव में इससे सहायता के लिए एक css संपत्ति जोड़ी है। Google द्वारा इस मार्गदर्शिका के माध्यम से एक रीडिंग प्राप्त करें कि आप इसे कैसे संभाल सकते हैं, इसका एक अच्छा विचार प्राप्त करें।

यहाँ उनके TL: DR है

CSS ओवरस्क्रॉल-व्यवहार संपत्ति डेवलपर्स को सामग्री के ऊपर / नीचे पहुंचने पर ब्राउज़र के डिफ़ॉल्ट ओवरफ़्लो स्क्रॉल व्यवहार को ओवरराइड करने की अनुमति देती है। उपयोग के मामलों में मोबाइल पर पुल-टू-रिफ्रेश सुविधा को अक्षम करना, ओवरस्क्रॉल चमक और रबरबैंडिंग प्रभाव को हटाना और पृष्ठ सामग्री को स्क्रॉल करने से रोकना शामिल है जब यह एक मोडल / ओवरले के नीचे होता है।

इसे काम करने के लिए, आपको इसे अपने सीएसएस में जोड़ना होगा:

body {
  overscroll-behavior: contain;
}

यह अभी तक केवल क्रोम, एज और फ़ायरफ़ॉक्स द्वारा समर्थित है, लेकिन मुझे यकीन है कि सफारी जल्द ही इसे जोड़ देगा क्योंकि वे पूरी तरह से सेवा कार्यकर्ताओं और पीडब्ल्यूए के भविष्य के साथ जहाज पर लगते हैं।

— मैथ्यू मुलिन
स्रोत

16

यह आज तक का सबसे बड़ा

— क्लेश है

क्या किसी ने "होमस्क्रीन में जोड़ें" क्रोम बैनर की उपस्थिति में देरी पर ध्यान दिया है?

— नथानिएल हिल

2

इसे निष्क्रिय करने के लिए इसे html एलिमेंट में लागू करना था

— जैकब एरिकसन

1

यह केवल एंड्रॉइड के लिए काम करता है, IOs पर अभी भी चमक प्रभाव दिखाने के लिए + देशी ताज़ा ताज़ा करने के लिए

— Fky

Developers.google.com/web/updates/2017/11/overscroll-behavior इस लिंक को भी बेहतर समझा सकता है

— arung86

15

फिलहाल आप केवल क्रोम के माध्यम से इस सुविधा को अक्षम कर सकते हैं : // झंडे / # अक्षम-पुल-से-ताज़ा-प्रभाव - सीधे अपने डिवाइस से खोलें।

आप touchmoveघटनाओं को पकड़ने की कोशिश कर सकते हैं, लेकिन स्वीकार्य परिणाम प्राप्त करने के लिए संभावना बहुत पतली है।

— केविन सैंडो
स्रोत

1

उत्तर के लिए धन्यवाद केविन, मैं इसे स्वीकार नहीं कर सका क्योंकि मैं उपयोगकर्ताओं से आश्रित कुछ के लिए देख रहा था। हालाँकि यह विधि काम करती है, इसलिए मैं आपके उत्तर को बढ़ा दूंगा क्योंकि मैं पर्याप्त प्रतिष्ठा प्राप्त कर रहा हूं।

— सेबेस्टियानो

यह अफ़सोस की बात है कि यह सबसे अच्छा समाधान प्रतीत होता है - क्या होगा यदि भविष्य में उस ध्वज की सेटिंग में परिवर्तन होता है, या आप अन्य साइटों पर ताज़ा करने के लिए पुल का उपयोग करने में सक्षम होना चाहते हैं ... आश्चर्य है कि इसे प्रोग्रामेटिक रूप से नियंत्रित नहीं किया जा सकता है। :(;

— user1063287

1

अगर Google का CEO इसे पढ़ रहा है, तो कृपया इस सुविधा को हटा दें। ऐसा नहीं लगता है कि यह आसानी से और व्यापक रूप से अक्षम हो सकता है, और मेरी राय में एक वेब एप्लिकेशन "सुविधा" है जो सभी वेब एप्लिकेशन नहीं चाहते हैं।

— user1063287

8

मैं 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 है, तो हम ईवेंट को रोक देते हैं। इस प्रकार, कोई ताज़ा नहीं।

इसका मतलब है कि हम हर 'कदम' पर गोलीबारी कर रहे हैं, जो महंगा हो सकता है, लेकिन अभी तक मुझे मिला सबसे अच्छा समाधान है ...

— उदार
स्रोत

2

जैसे ही उपयोगकर्ता स्क्रॉल करता है, उसे देखना बंद कर देना सुरक्षित है, क्योंकि ताज़ा करने के लिए खींचने से ट्रिगर होने का कोई मौका नहीं है। इसी तरह, अगर scrolltop > 0, घटना शुरू नहीं होगी। मेरे कार्यान्वयन में, मैं touchmoveइवेंट को touchstartकेवल तभी बाँधता हूँ , अगर scrollTop <= 0। जैसे ही उपयोगकर्ता स्क्रॉल डाउन ( initialY >= e.touches[0].clientY) करता है, मैं इसे unbind करता हूं । यदि उपयोगकर्ता स्क्रॉल करता है ( previousY < e.touches[0].clientY), तो मैं कॉल करता हूं preventDefault।

— निकोलस बूलियान

7

कई घंटों की कोशिश के बाद, यह समाधान मेरे लिए काम करता है

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

— जोस लोगोरियोसिओ
स्रोत

इसके लिए jQuery का उपयोग करने की कोई आवश्यकता नहीं है। बस अपनी सीएसएस कोड फ़ाइल में "टच-एक्शन: पैन-डाउन" जोड़ें।

— कीगन तेतेर्ट

1

बस इसे अपने css में प्रयोग करें:html{touch-action:pan-down}

— csandreas1

5

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, घटना शुरू नहीं होगी। मेरे कार्यान्वयन में, मैं टचस्टॉव इवेंट को टचस्टार्ट पर बांधता हूं, केवल अगर scrollTop <= 0। जैसे ही उपयोगकर्ता स्क्रॉल डाउन ( initialY >= e.touches[0].clientY) करता है, मैं इसे unbind करता हूं । यदि उपयोगकर्ता स्क्रॉल करता है ( 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);

स्वाभाविक रूप से, वही शुद्ध जेएस के साथ भी प्राप्त किया जा सकता है।

— निकोलस बोलियान
स्रोत

मुझे e.originalEvent.touches[0].clientYयह काम करने के लिए उपयोग करना था । फिर भी तर्क के साथ संघर्ष जब पुनः लोड को रोकने के लिए। अभी यह बेतरतीब ढंग से स्क्रॉल करने से रोकने के लिए लगता है ... सही दिशा में संकेत के लिए धन्यवाद रखो!

— थोमस

निर्देश किस तत्व में जोड़ा जाता है?

— फ़िज़िक्स

एंगुलरजेएस निर्देश ने मेरे लिए अच्छा काम किया। हम एक साथ फ्रेमवर्क 7 और कोणीय का उपयोग कर रहे हैं (यह सुझाव नहीं देंगे) और कुछ स्क्रॉलटॉप के सही व्यवहार को रोक रहा था। इसलिए मुझे तब संशोधित करना पड़ा जब ब्लॉकस्क्रॉल को तत्व में जोड़ा जाएगा। लेकिन सिर्फ धन्यवाद कहना चाहता था!

— डस्टिन जेन्सेन

5

सरल जावास्क्रिप्ट

मैंने मानक जावास्क्रिप्ट का उपयोग करके कार्यान्वित किया। सरल और लागू करने में आसान। बस पेस्ट करें और यह ठीक काम करता है।

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

— सैकी सैन
स्रोत

यह क्रोम के लिए बहुत अच्छा काम करता है, लेकिन पेज के शीर्ष पर एक div को स्क्रॉल करते समय सफारी / iOS 9.2 पर मेरे लिए स्क्रॉल करने के साथ कुछ मुद्दों का कारण बना ( यहां पुन: प्रस्तुत किया गया )। मैं ऊपर Evynbody: {overflow-y:hidden} से चाल का उपयोग कर समाप्त हो गया ।

— सेनेट

downvoting के रूप में क्रोम पर काम करता है नहीं है, लेकिन फ़ायरफ़ॉक्स उदाहरण में काम करता है, embed.plnkr.co/rqbOVSOkKyhAgoHK2sEP केवल मोबाइल में खुला

— विजय

आपके द्वारा चिपकाया गया लिंक क्रोम के साथ-साथ मेरे एंड्रॉइड मोबाइल पर भी काम करता है। इसने पुल पर ताज़ा करने की अनुमति नहीं दी। परीक्षण करने के लिए आप Android / ios के किस संस्करण का उपयोग कर रहे हैं?

— सैकी

2

Chrome 56 से आपको निष्क्रिय सेट करने की आवश्यकता है: इसे बनाने के लिए गलत: document.addEventListener ('टचस्टार्ट', टचस्टार्टहैंडलर, {निष्क्रिय: गलत}); दस्तावेज़।

— एंटन कुज़मिन

4

शुद्ध सीएसएस पर सबसे अच्छा समाधान:

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

— यूजीन फॉक्स
स्रोत

क्या आपने वास्तव में क्रोम का उपयोग करते हुए मोबाइल पर इसका परीक्षण किया है?

— ग्रेगोर वॉनोव

4

आप यह कोशिश कर सकते हैं

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

— सरथ अक
स्रोत

3

मुझे लगता है कि आपके शरीर को सीएसएस ओवरफ्लो-वाई स्थापित करना : छिपाना सबसे सरल तरीका है। यदि आप एक स्क्रॉलिंग एप्लिकेशन पृष्ठ रखना चाहते हैं, तो आप केवल स्क्रॉल सुविधाओं के साथ एक डिव कंटेनर का उपयोग कर सकते हैं।

— कीगन तेतेर्ट
स्रोत

असंभव लगता है एक लाइन के साथ इसे ठीक करने के लिए, लेकिन एक आकर्षण की तरह काम करता है, बहुत बहुत धन्यवाद!

— इग्नासियो आरा

2

ध्यान दें कि अतिप्रवाह-वाई विरासत में नहीं मिली है, इसलिए आपको इसे सभी ब्लॉक तत्वों पर सेट करने की आवश्यकता है।

आप इसे केवल jQuery के साथ कर सकते हैं:

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

— kofifus
स्रोत

अन्य उत्तरों के बीच, यह वास्तव में मदद करता है। धन्यवाद। इस लाइन को css में जोड़ें। शरीर {अतिप्रवाह-य: छिपा हुआ; }

— सरीन JS

2

कुछ हफ़्ते के बाद से मुझे पता चला कि जावास्क्रिप्ट फ़ंक्शन जिसे मैंने क्रोम ताज़ा क्रिया को अक्षम करने के लिए उपयोग किया था वह अब काम नहीं करेगा। मैंने इसे हल करने के लिए इसे बनाया है:

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

स्निपेट का विस्तार करें

— Wobbo
स्रोत

1

शुद्ध जेएस समाधान।

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

— user1503606
स्रोत

0

मैंने जो कुछ किया, वह / touchstartऔर घटनाओं के लिए निम्नलिखित था :touchendtouchcancel

scrollTo(0, 1)

चूंकि क्रोम स्क्रॉल नहीं करता है, अगर वह स्क्रॉल की स्थिति पर नहीं है तो यह 0क्रोम को ताज़ा करने के लिए पुल करने से रोक देगा।

यदि यह अभी भी काम नहीं करता है, तो पृष्ठ लोड होने पर भी ऐसा करने का प्रयास करें।

— xdevs23
स्रोत

0

मैंने इसके साथ पुल-डाउन-टू-रिफ्रेश समस्या हल की:

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

— पॉल इस्सोतन
स्रोत

Android की क्रोम पुल-डाउन-टू-रिफ्रेश सुविधा को अक्षम करना

2019+ के लिए सरल समाधान

AngularJS

jQuery

सरल जावास्क्रिप्ट