आईपैड सफारी: स्क्रॉलिंग को अक्षम करें, और उछाल प्रभाव?

Question

मैं एक ब्राउज़र आधारित ऐप पर काम कर रहा हूं, वर्तमान में मैं आईपैड सफारी ब्राउज़र के लिए विकसित और स्टाइल कर रहा हूं।

मैं आईपैड पर दो चीजों की तलाश कर रहा हूं: मैं उन पृष्ठों के लिए ऊर्ध्वाधर स्क्रॉलिंग को कैसे अक्षम कर सकता हूं जिन्हें इसकी आवश्यकता नहीं है? और मैं लोचदार उछाल प्रभाव को कैसे निष्क्रिय कर सकता हूं?

Comments

निम्नलिखित उत्तर का संदर्भ केवल एक है जो मेरे लिए काम किया है और वर्तमान है ( stackoverflow.com/a/51176339/1979180 )

— frage

Answer 1

यह उत्तर अब लागू नहीं है, जब तक कि आप एक बहुत पुराने iOS डिवाइस के लिए विकसित नहीं कर रहे हैं ... कृपया अन्य समाधान देखें

---

2011 का जवाब: iOS सफारी के अंदर चलने वाले वेब / html ऐप के लिए आप कुछ ऐसा चाहते हैं

document.ontouchmove = function(event){
    event.preventDefault();
}

IOS 5 के लिए आप निम्नलिखित को ध्यान में रख सकते हैं: document.ontouchmove और iOS 5 पर स्क्रॉल करना

अद्यतन सितंबर 2014: अधिक गहन दृष्टिकोण यहाँ पाया जा सकता है: https://github.com/luster-io/prevent-overscroll । उसके लिए और बहुत सारी उपयोगी वेबएप सलाह के लिए, http://www.luster.io/blog/9-29-14-mobile-web-checklist.html देखें

अपडेट मार्च 2016: वह अंतिम लिंक अब सक्रिय नहीं है - https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist देखें इसके बजाय संग्रहीत संस्करण के लिए .html इस ओर इशारा करने के लिए धन्यवाद @falsarella।

Comments

मेरे पास iOS सफारी के अंदर चलने वाला वेबएप है और मैंने ontouchmove इवेंट को अक्षम करने की कोशिश की है, लेकिन ध्यान से किए जाने पर उछाल प्रभाव देखना अभी भी संभव है। (iOS 5)

— नीलेश

उछाल प्रभाव को निष्क्रिय करने के बारे में क्या ...?

— युवल ए।

इस दृष्टिकोण के साथ समस्या यह है कि आपके डोम में स्क्रॉल करने योग्य div अब स्क्रॉल नहीं करेंगे। आपके डोम सेटअप के आधार पर, इसके चारों ओर तरीके हैं।

— huesforalice

यहाँ लोगों का एक समूह है जो स्क्रॉलिंग के बारे में पूछ रहा है ताकि इस का उपयोग करते समय .. उन divs को स्क्रॉल करने योग्य बनाने के लिए, onTouchMove: function(e) { e.stopPropagation(); e.stopImmediatePropagation(); } इसे जोड़ें इससे घटना को शरीर से टकराने से रोका जा सकेगा, लेकिन शरीर गैर-उछालभरा रहेगा। संपादित करें: यह मान रहा है कि आपने $ ('div') सेट किया है। ('touchmove', ... onTouchMove);

— मैट किंफिक

@OskarAustegard पिछले लिंक मेरे लिए काम नहीं किया था, लेकिन मैं वेब संग्रह पर सामग्री मिल सकता है: web.archive.org/web/20151103001838/http://www.luster.io/blog/...

— falsarella

Answer 2

आप शरीर की स्थिति / html को नियत में बदल सकते हैं:

body,
html {
  position: fixed;
}

Comments

यह वास्तव में iPad iOS 8.2 सफारी पर बहुत अच्छा काम करता था; कोई उछाल प्रभाव नहीं।

— अक्सेली पलन

सबसे अच्छा तरीका है कि मैंने अब तक देखा है

— hildende

यदि आप स्थिति के साथ कुछ रखना चाहते हैं तो काम नहीं करता है: पूर्ण और सभी पक्ष 0 पर सेट (एक फुलस्क्रीन div बनाने के लिए) - आपका पूरा दस्तावेज़ कुछ भी नहीं सिकुड़ता है।

— riv

जब मैं इस का उपयोग करता हूं तो पृष्ठ मेरे लिए पृष्ठ के शीर्ष पर वापस कूदता है और फिर मैं एक इनपुट पर ध्यान केंद्रित करता हूं। क्या आप इसके आस-पास का रास्ता जानते हैं?

— जूली

@riv जोड़ने की चौड़ाई: 100%; ऊंचाई: दोनों शरीर और HTML में 100% ने मेरी मदद की।

— टिम

Answer 3

आधुनिक मोबाइल ब्राउज़रों पर स्क्रॉल करने से रोकने के लिए आपको निष्क्रिय जोड़ना होगा: असत्य। मैं अपने बालों को खींच रहा था जब तक मुझे यह समाधान नहीं मिला। मैंने केवल इंटरनेट पर एक अन्य स्थान पर इसका उल्लेख किया है।

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

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault);
}

Comments

इसके बिना { passive: false }निश्चित रूप से काम नहीं कर रहा है !!! StackOverflow dude पर आपका स्वागत है

— Ser

मैं इस समाधान प्रदान करने के लिए आपकी सराहना करता हूं!

— पॉल जेड

यह सही जवाब है। आप यहाँ स्पष्टीकरण देख सकते हैं: developer.mozilla.org/en-US/docs/Web/API/EventTarget/… क्रोम 54 टचमूव को निष्क्रिय करने के बाद सही होता है जिसका अर्थ है कि निवारण कॉल को अनदेखा किया जाएगा। इसीलिए आपको {passive: false} को पास करना होगा, इसलिए preventDefault कॉल को नजरअंदाज नहीं किया जाना चाहिए।

— डेरिकिटो

आप जेएस में फ़ंक्शन की घोषणा कर रहे हैं - लेकिन आप इस फ़ंक्शन को किसी तत्व पर कैसे कॉल करते हैं इसलिए यह सुझाव के अनुसार काम करता है?

— १:30

यदि आप सभी प्रकार की स्क्रॉलिंग को अक्षम करना चाहते हैं तो यह बहुत अच्छा है। लेकिन क्या होगा अगर मैं केवल शरीर पर स्क्रॉल को अक्षम करना चाहता हूं और एक तत्व के साथ स्क्रॉल करने की संभावना रखता हूं overflow-y: scroll? उदाहरण के लिए, शरीर की तुलना में लम्बे दृश्य ऊँचाई के साथ एक मोडल होना।

— कालसाल

Answer 4

ऐसा करने के लिए आप इस jQuery कोड स्निपेट का उपयोग कर सकते हैं:

$(document).bind(
      'touchmove',
          function(e) {
            e.preventDefault();
          }
);

यह वर्टिकल स्क्रॉलिंग को ब्लॉक करेगा और आपके पेज पर होने वाले किसी भी बाउंस बैक इफेक्ट को भी।

Comments

यह जावास्क्रिप्ट नहीं है, यह jQuery है। आपको यह उल्लेख करना चाहिए कि, हर कोई उस ढांचे का उपयोग नहीं कर रहा है।

— int

मैं क्षैतिज उछाल या स्क्रॉल को कैसे रोक सकता हूं

— फिदेल कास्त्रो

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

— एलेसेंड्रो इनकैरैटी

@ सिर्फ यह कहना वास्तव में जावास्क्रिप्ट है। यह सिर्फ शुद्ध जावास्क्रिप्ट नहीं है।

— बेन लोरंटफ़ी

Answer 5

overflow: scroll;
-webkit-overflow-scrolling: touch;

कंटेनर पर आप तत्व के अंदर उछाल प्रभाव सेट कर सकते हैं

स्रोत: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Comments

साथ overflow:hiddenमें <body>, यह अभी भी सबसे अच्छा समाधान है। हालाँकि जब कीबोर्ड को खोलते हैं या स्क्रीन के निचले भाग में खिसकते हैं, तो यह काम नहीं करेगा।

— फाबियन वॉन एलर्ट्स

इनपुट ऑनफोकस हटाने की कोशिश करें अतिप्रवाह

— user956584

Answer 6

मुझे पता है कि यह थोड़ा ऑफ-पिस्ट है, लेकिन मैं Swiffy का उपयोग फ्लैश को एक इंटरैक्टिव एचटीएमएल 5 गेम में बदलने के लिए कर रहा हूं और एक ही स्क्रॉलिंग मुद्दे पर आया हूं लेकिन कोई समाधान नहीं मिला है जो काम करता है।

मेरे पास समस्या यह थी कि स्विफी चरण पूरी स्क्रीन को उठा रहा था, इसलिए जैसे ही उसने लोड किया, दस्तावेज़ टचमॉव इवेंट कभी ट्रिगर नहीं हुआ।

अगर मैंने स्विफ्टी कंटेनर में उसी घटना को जोड़ने की कोशिश की, तो जैसे ही मंच लोड किया गया, इसे बदल दिया गया।

अंत में मैंने चरण के भीतर हर DIV को टचमूव इवेंट लागू करके इसे (बल्कि गड़बड़) हल कर दिया। चूँकि ये divs भी कभी-कभी बदलते थे, मुझे उनकी जाँच करते रहना चाहिए था।

यह मेरा समाधान था, जो अच्छी तरह से काम करता है। मुझे आशा है कि यह मेरे जैसे ही समाधान खोजने की कोशिश कर रहे किसी और के लिए उपयोगी है।

var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}

Comments

यह आईपैड में पूरे स्क्रॉल को निष्क्रिय करता है

— फिदेल कास्त्रो

Answer 7

आईपैड सफारी को हटाने के लिए कोड: स्क्रॉलिंग को अक्षम करें, और प्रभाव को उछाल दें

   document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, { passive: false });

यदि आपके पास दस्तावेज़ के अंदर कैनवास टैग है, तो कुछ समय में यह कैनवस के अंदर ऑब्जेक्ट की उपयोगिता को प्रभावित करेगा (उदाहरण: ऑब्जेक्ट का आंदोलन); इसलिए इसे ठीक करने के लिए नीचे कोड जोड़ें।

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });

Answer 8

इस जेएस sollutuion की कोशिश करो :

var xStart, yStart = 0; 

document.addEventListener('touchstart', function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
}); 

document.addEventListener('touchmove', function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

डिफ़ॉल्ट सफ़ारी स्क्रॉल को रोकता है और आपके स्पर्श ईवेंट श्रोताओं को अलग किए बिना इशारों को उछालता है।

Comments

यह वेब ऐप को बॉडी एलिमेंट पर पूरी तरह से स्क्रॉल करने से रोकता है।

— MartijnICU

Answer 9

मेरे लिए कोई भी समाधान काम नहीं करता है। यह मेरा इसे करने का तरीका है।

  html,body {
      position: fixed;
      overflow: hidden;
    }
  .the_element_that_you_want_to_have_scrolling{
      -webkit-overflow-scrolling: touch;
  }

Comments

मैं करता हूं। }

— रॉय सेगल

आपके उत्तर ने मेरे लिए html, निकाय के लिए काम किया लेकिन मैं स्क्रॉल करने के लिए "the_element_that_you_want_to_have_scrolling" प्राप्त नहीं कर सकता। यह तत्व कुछ डिव के अंदर निहित है जो शरीर के नीचे हैं। क्या यह मायने रखता है कि इस नेस्टेड डिव के लिए कोई विशिष्ट तत्व टैग क्या होगा जो मैं इसे स्क्रॉल करना चाहता हूं? मेरे पास स्थिति है: रिश्तेदार।

— ikwyl6

Answer 10

IPhone में परीक्षण किया गया। बस लक्ष्य तत्व कंटेनर पर इस सीएसएस का उपयोग करें और यह स्क्रॉलिंग व्यवहार को बदल देगा, जो उंगली स्क्रीन छोड़ने पर बंद हो जाता है।

-webkit-overflow-scrolling: auto

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Answer 11

उन लोगों के लिए जो माइस्क्रिप्ट वेब ऐप का उपयोग कर रहे हैं और वास्तव में लिखने के बजाय बॉडी स्क्रॉलिंग / ड्रैगिंग (iPad और टैबलेट्स पर) से जूझ रहे हैं:

<body touch-action="none" unresolved>

उसने मेरे लिए इसे हल कर दिया।

Answer 12

स्क्रॉल रोकने के लिए आप js का उपयोग कर सकते हैं:

let body = document.body;

let hideScroll = function(e) {
  e.preventDefault();
};

function toggleScroll (bool) {

  if (bool === true) {
    body.addEventListener("touchmove", hideScroll);
  } else {
    body.removeEventListener("touchmove", hideScroll);
  }
}

और toggleScrollजब आप opnen / close modal को देखते हैं तो केवल run / stop func की तुलना में ।

ऐशे ही toggleScroll(true) / toggleScroll(false)

(यह केवल iOS पर है, Android पर काम नहीं कर रहा है)

Answer 13

इस जेएस समाधान की कोशिश करें जो webkitOverflowScrollingशैली को जन्म देती है। यहाँ चाल यह है कि यह शैली बंद है, मोबाइल सफारी साधारण स्क्रॉलिंग पर जाती है और अति-उछाल को रोकती है - अफसोस, यह चालू ड्रैग को रद्द करने में सक्षम नहीं है। यह जटिल समाधान भी ट्रैक onscrollकरता है क्योंकि शीर्ष पर उछाल scrollTopनकारात्मक बनाता है जिसे ट्रैक किया जा सकता है। इस समाधान को iOS 12.1.1 पर परीक्षण किया गया था और इसमें एक खामी है: स्क्रॉल को तेज करते हुए सिंगल-बाउंस अभी भी होता है क्योंकि स्टाइल को रीसेट करना तुरंत इसे रद्द नहीं कर सकता है।

function preventScrollVerticalBounceEffect(container) {
  setTouchScroll(true) //!: enable before the first scroll attempt

  container.addEventListener("touchstart", onTouchStart)
  container.addEventListener("touchmove", onTouch, { passive: false })
  container.addEventListener("touchend", onTouchEnd)
  container.addEventListener("scroll", onScroll)

  function isTouchScroll() {
    return !!container.style.webkitOverflowScrolling
  }

  let prevScrollTop = 0, prevTouchY, opid = 0

  function setTouchScroll(on) {
    container.style.webkitOverflowScrolling = on ? "touch" : null

    //Hint: auto-enabling after a small pause makes the start
    // smoothly accelerated as required. After the pause the
    // scroll position is settled, and there is no delta to
    // make over-bounce by dragging the finger. But still,
    // accelerated content makes short single over-bounce
    // as acceleration may not be off instantly.

    const xopid = ++opid
    !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

    if(!on && container.scrollTop < 16)
      container.scrollTop = 0
    prevScrollTop = container.scrollTop
  }

  function isBounceOverTop() {
    const dY = container.scrollTop - prevScrollTop
    return dY < 0 && container.scrollTop < 16
  }

  function isBounceOverBottom(touchY) {
    const dY = touchY - prevTouchY

    //Hint: trying to bounce over the bottom, the finger moves
    // up the screen, thus Y becomes smaller. We prevent this.

    return dY < 0 && container.scrollHeight - 16 <=
      container.scrollTop + container.offsetHeight
  }

  function onTouchStart(e) {
    prevTouchY = e.touches[0].pageY
  }

  function onTouch(e) {
    const touchY = e.touches[0].pageY

    if(isBounceOverBottom(touchY)) {
      if(isTouchScroll())
        setTouchScroll(false)
      e.preventDefault()
    }

    prevTouchY = touchY
  }

  function onTouchEnd() {
    prevTouchY = undefined
  }

  function onScroll() {
    if(isTouchScroll() && isBounceOverTop()) {
      setTouchScroll(false)
    }
  }
}

Answer 14

@Ben ने उत्तर में सुधार किया और @Tim द्वारा टिप्पणी की

यह सीएसएस सीएसएस को फिर से प्रस्तुत करने के साथ स्क्रॉलिंग और प्रदर्शन के मुद्दे को रोकने में मदद करेगा क्योंकि स्थिति में बदलाव / चौड़ाई और ऊंचाई के बिना थोड़ा अंतराल है

body,
html {
  position: fixed;
  width: 100%; 
  height: 100%
}

Comments

IOS13 पर, यह मेरे लिए सबसे साफ समाधान है, और अभी तक कोई कमियां नहीं मिली हैं ...

— सोयालेंट ग्राहम

Answer 15

आप में से जो उछल-कूद से छुटकारा पाना नहीं चाहते हैं, लेकिन यह जानने के लिए कि यह कब रुकता है (उदाहरण के लिए स्क्रीन दूरी की कुछ गणना शुरू करने के लिए), आप निम्न कर सकते हैं (कंटेनर अतिप्रवाह कंटेनर तत्व है):

    const isBouncing = this.container.scrollTop < 0 ||
    this.container.scrollTop + this.container.offsetHeight >
        this.container.scrollHeight

Answer 16

सफारी उछाल को स्क्रॉल प्रभाव अक्षम करें:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: fixed;
}  

Answer 17

क्रोधित कीवी के समान ही मुझे यह स्थिति के बजाय ऊंचाई का उपयोग करने के लिए मिला:

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

.the_element_that_you_want_to_have_scrolling{
  -webkit-overflow-scrolling: touch;
}

Comments

डॉक्टर के रूप में यह गति को अक्षम करने के बाद भी उछाल को सक्षम करेगा

— CaSUaL

@CaSUaL निश्चित नहीं कि आपका क्या मतलब है? इस समाधान ने मेरे उपयोग के मामले में काम किया ...

— austinh7

Answer 18

समाधान का परीक्षण किया गया, iOS 12.x पर काम करता है

यह वह समस्या है जिसका मैं सामना कर रहा था:

<body> <!-- the whole body can be scroll vertically -->
  <article>

    <my_gallery> <!-- some picture gallery, can be scroll horizontally -->
    </my_gallery>

  </article>
</body>

जब मैं अपनी गैलरी स्क्रॉल कर रहा हूं, तो शरीर हमेशा अपने आप को स्क्रॉल कर रहा है (मानव स्वाइप वास्तव में क्षैतिज नहीं हैं), जो मेरी गैलरी को बेकार कर देता है।

यहाँ है कि मैंने क्या किया जबकि मेरी गैलरी स्क्रॉल करना शुरू करती है

var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari

और जब मेरी गैलरी अपनी स्क्रॉलिंग समाप्त करती है ...

var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}

आशा है कि यह मदद करता है ~