वेब पेज के "ओवरक्रोलिंग" को रोकें

Question

मैक के लिए क्रोम में, एक पृष्ठ (एक बेहतर शब्द की कमी के लिए) को "ओवरसाइक्रोल" कर सकता है, जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है, iPad या iPhone के समान "पीछे क्या है" देखने के लिए।

मैंने देखा है कि कुछ पृष्ठों में यह अक्षम है, जैसे जीमेल और "नया टैब" पृष्ठ।

मैं "ओवरस्क्रोलिंग" को कैसे अक्षम कर सकता हूं? क्या ऐसे अन्य तरीके हैं जिनसे मैं "ओवरक्रोलिंग" को नियंत्रित कर सकता हूं?

Comments

मैं वास्तव में उदाहरण के लिए, newtab पेज पर इसे सक्षम करने का प्रयास कर रहा हूं । यहां शामिल मुद्दों को समझने की कोशिश कर रहा है।

— 22

मुझे नहीं लगता कि ऐसा करने का कोई तरीका है। यह एक सरल बात है कि पृष्ठ को लंबे समय तक होना चाहिए ताकि स्कोरर को शुरू करने की अनुमति मिल सके। इसके अलावा, अपनी पोस्ट का शीर्षक बदलने के बारे में विचार करें कि आप इसके बजाय क्या हासिल करना चाहते हैं।

— जॉन एगलैंड

Answer 1

स्वीकृत समाधान मेरे लिए काम नहीं कर रहा था। एकमात्र तरीका जो मुझे काम करते हुए मिला, वह अभी भी स्क्रॉल करने में सक्षम है:

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

body {
    height: 100%;
    overflow: auto;
}

Comments

यह समाधान उन दोनों डिवाइसों के लिए समस्याग्रस्त है जो htmlस्टाइल हैक का सम्मान नहीं करते हैं और मोबाइल वेब ब्राउज़र के bodyलिए जो ऊँचाई को नापसंद करने के पूर्ण अतिप्रवाह को देखते हैं html।

— रनबीर ने '

यह समाधान Mac के लिए Chrome 46 के रूप में काम नहीं करता है। यह ओवर-स्क्रॉलिंग को रोकता है लेकिन कोई भी चाइल्ड एलिमेंट स्क्रॉल करने योग्य नहीं है।

— डैनियल बॉननेल

फिर, आप स्क्रॉलटॉप मूल्य कैसे प्राप्त कर सकते हैं जो आप आमतौर पर प्राप्त करेंगे $(window).scrollTop?

— गुइग

मैक के लिए क्रोम 49 या मैक के लिए फ़ायरफ़ॉक्स 44 पर न तो समाधान मेरे लिए काम करता है। window.scrollYहमेशा होता है 0।

— मोमो

क्रोम के लिए काम करता है, लेकिन सफारी के लिए नहीं।

— ब्रेटन वेड

Answer 2

Chrome 63+, फ़ायरफ़ॉक्स 59+ और ओपेरा 50+ में आप इसे CSS में कर सकते हैं:

body {
  overscroll-behavior-y: none;
}

यह प्रश्न के स्क्रीनशॉट में दिखाए गए iOS पर रबरबैंडिंग प्रभाव को निष्क्रिय करता है। हालांकि यह पुल-टू-रिफ्रेश, ग्लो इफेक्ट्स और स्क्रॉल चाइनिंग को भी निष्क्रिय कर देता है।

हालाँकि आप अपने स्वयं के प्रभाव या कार्यक्षमता को ओवर-स्क्रॉलिंग पर लागू करने के लिए चुनाव कर सकते हैं। यदि आप उदाहरण के लिए पृष्ठ को धुंधला करना चाहते हैं और एक साफ एनीमेशन जोड़ना चाहते हैं:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%; 
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

ब्राउज़र का समर्थन

क्रोम 63+, फ़ायरफ़ॉक्स 59+ और ओपेरा 50+ इसे लिखते हैं। एज ने पारंपरिक रूप से इसका समर्थन किया जबकि सफारी एक अज्ञात है। प्रगति को ट्रैक यहाँ और वर्तमान ब्राउज़र संगतता MDN दस्तावेजीकरण

अधिक जानकारी

• Chrome 63 रिलीज़ वीडियो
• Chrome 63 रिलीज़ पोस्ट - ऊपर लिखी गई सभी चीज़ों के लिंक और विवरण शामिल हैं।
• overscroll-behavior सीएसएस कल्पना
• MDN प्रलेखन

Comments

मेरी राय में, यह सबसे अच्छा समाधान है। और सरल। सभी upvotes के साथ एक समस्याग्रस्त हो सकता है।

— 18

इसने मेरे लिए अच्छा काम किया।

— रजनीश पैनोली

Answer 3

एक तरह से आप इसे रोक सकते हैं, निम्नलिखित सीएसएस का उपयोग कर रहा है:

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

body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

इस तरह से शरीर में कभी कोई अतिप्रवाह नहीं होता है और पृष्ठ के ऊपर और नीचे स्क्रॉल करने पर "उछाल" नहीं होगा। कंटेनर अपनी सामग्री को पूरी तरह से स्क्रॉल करेगा। यह सफारी और क्रोम में काम करता है।

संपादित करें

<div>रैपर के रूप में अतिरिक्त-कोड क्यों उपयोगी हो सकता है:
फ्लोरियन फेल्डहॉस का समाधान थोड़ा कम कोड का उपयोग करता है और ठीक भी काम करता है। हालाँकि, यह थोड़ा विचित्र हो सकता है, जब यह उस सामग्री की ओर आता है जो व्यूपोर्ट की चौड़ाई से अधिक है। इस स्थिति में विंडो के नीचे स्क्रॉलबार व्यूपोर्ट के आधे रास्ते से बाहर चला जाता है और इसे पहचानना / पहुंचना कठिन होता है। body { margin: 0; }उपयुक्त होने पर इसका उपयोग करने से बचा जा सकता है । ऐसी स्थिति में जहां आप इस सीएसएस को जोड़ नहीं सकते हैं रैपर तत्व उपयोगी है क्योंकि स्क्रॉलबार हमेशा पूरी तरह से दिखाई देता है।

नीचे एक स्क्रीनशॉट खोजें:

Comments

यदि यह एक बार काम करता है, तो यह काम नहीं करता है। मेरे Chrome v37 में, ओवरस्कॉल व्यवहार कहीं भी होगा जहां कोई तत्व स्क्रॉल करता है।

— bbsimonbb

@ user1585345 मैंने अभी इसे क्रोम 38 में फिर से ओएस एक्स पर परीक्षण किया है और यह अभी भी (सफारी में भी) काम करता है। यहां वह फाइल है जिसका मैं उपयोग कर रहा हूं। क्या आप इस फाइल के साथ इसका परीक्षण कर सकते हैं? Sendpace.com पर फ़ाइल का सीधा लिंक ।

— सम्मिलित

मैंने उपरोक्त फ़ाइल के साथ परीक्षण किया है, और मेरे पास अभी भी उछाल है। मुझे संदेह है कि हम इस रहस्य की तह तक नहीं पहुंचेंगे। क्रोम 37

— bbsimonbb

आपको अतिरिक्त आवरण div की आवश्यकता नहीं होनी चाहिए। बेहतर समाधान के लिए नीचे दिए गए उत्तर की जाँच करें।

— JayD3e

यह समाधान Mac के लिए Chrome 46 के रूप में काम नहीं करता है। यह ओवर-स्क्रॉलिंग को रोकता है लेकिन कोई भी चाइल्ड एलिमेंट स्क्रॉल करने योग्य नहीं है।

— डैनियल बॉननेल

Answer 4

touchmoveपूर्वनिर्धारित कार्रवाई को हटाने के लिए आप इस कोड का उपयोग कर सकते हैं :

document.body.addEventListener('touchmove', function(event) {
  console.log(event.source);
  //if (event.source == document.body)
    event.preventDefault();
}, false);

Answer 5

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

Comments

हालांकि यह प्रश्न का उत्तर दे सकता है, उत्तर के आवश्यक भागों की व्याख्या करना बेहतर है और संभवतः ओपी कोड के साथ समस्या क्या थी।

— पीहरो

आपका उत्तर इसकी लंबाई और सामग्री के कारण चिह्नित किया गया था। मैं संशोधित करने का सुझाव देता हूं। शायद अतिरिक्त विवरण जोड़ें।

— www139

position: fixedरक्षक है!

— निज़ामिल पुत्रा

Answer 6

इस तरह आजमाएं

body {
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}

Answer 7

position: absoluteमेरे लिये कार्य करता है। मैंने Chrome 50.0.2661.75 (64-bit)और OSX पर परीक्षण किया है ।

body {
  overflow: hidden;
}

// position is important
#element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

Answer 8

बाउंस प्रभाव को अक्षम नहीं किया जा सकता सिवाय वेबपेज की ऊंचाई के window.innerHeight, आप अपने उप-तत्वों को स्क्रॉल कर सकते हैं।

html {
    overflow: hidden;
}