बॉडी स्क्रॉलिंग रोकें लेकिन ओवरले स्क्रॉलिंग की अनुमति दें

Question

मैं एक "लाइटबॉक्स" प्रकार के समाधान की खोज कर रहा हूं जो इसे अनुमति देता है लेकिन अभी तक एक नहीं मिला है (कृपया, सुझाव दें कि यदि आप किसी को जानते हैं)।

जिस व्यवहार को मैं पुनः बनाने की कोशिश कर रहा हूं वह वैसा ही है जैसा आप किसी चित्र पर क्लिक करते समय Pinterest पर देखेंगे । ओवरले स्क्रॉल करने योग्य है ( जैसा कि पूरे ओवरले में पृष्ठ के शीर्ष पर एक पृष्ठ की तरह चलता है ) लेकिन ओवरले के पीछे का शरीर निश्चित है।

मैंने इसे केवल सीएसएस ( यानी divपूरे पृष्ठ के शीर्ष पर एक ओवरले और शरीर के साथoverflow: hidden ) बनाने का प्रयास किया , लेकिन यह divस्क्रॉल करने योग्य से नहीं रोकता है।

स्क्रॉलिंग से बॉडी / पेज को कैसे रखें लेकिन फुलस्क्रीन कंटेनर के अंदर स्क्रॉल करते रहें?

Comments

यह सिर्फ एक "उपरिशायी" प्लगइन की तरह नहीं है, जैसे कि अतिप्रवाह-वाई स्क्रॉल के साथ तय की गई स्थिति का उपयोग करते हुए?

— ggzone

Pinterest का लिंक मदद नहीं करता है, क्योंकि इसकी सामग्री एक लॉगिन दीवार के पीछे है।

— २५४०६२५

2017 अद्यतन: भले ही आप Pinterest में लॉग इन करते हैं, आप जो पाते हैं वह यह है कि ओपी में वर्णित ओवरले प्रभाव अब मौजूद नहीं है - इसके बजाय जब आप एक छवि पर क्लिक करते हैं तो आप छवि के एक बड़े संस्करण को प्रदर्शित करने वाले एक साधारण पृष्ठ पर जाते हैं।

— एनाबेल

Answer 1

सिद्धांत

Pinterest साइट के वर्तमान कार्यान्वयन को देखते हुए (यह भविष्य में बदल सकता है), जब आप ओवरले खोलते हैं तो एक noscrollवर्ग bodyतत्व पर लागू होता है और overflow: hiddenसेट किया जाता है, इस प्रकार bodyअब स्क्रॉल करने योग्य नहीं है।

ओवरले (ऑन-द-मक्खी या पहले से ही पृष्ठ के अंदर और के माध्यम से दृश्यमान बनाया बनाया display: blockहै, यह कोई फर्क नहीं पड़ता) position : fixedऔर overflow-y: scrollके साथ, top, left, rightऔर bottomगुण के लिए सेट0 : इस शैली बनाता ओवरले पूरे व्यूपोर्ट भरें।

divओवरले के अंदर के बजाय सिर्फ में है position: staticतो आप देख खड़ी स्क्रॉलबार उस तत्व से संबंधित है। परिणामस्वरूप सामग्री स्क्रॉल करने योग्य होती है, लेकिन ओवरले निश्चित रहता है।

जब आप ज़ूम को बंद करते हैं display: noneतो आप ओवरले (माध्यम से ) को छिपाते हैं और फिर आप इसे पूरी तरह से जावास्क्रिप्ट (या सिर्फ सामग्री के अंदर से निकाल सकते हैं, यह आपके ऊपर है कि इसे कैसे इंजेक्ट किया जाए)।

अंतिम चरण के रूप में आपको noscrollवर्ग को भी हटाना है body(इसलिए अतिप्रवाह संपत्ति अपने प्रारंभिक मूल्य पर लौटती है)

---

कोड

कोडपेन उदाहरण

(यह aria-hiddenदिखाने और छिपाने और इसकी पहुँच बढ़ाने के लिए ओवरले की विशेषता को बदलकर काम करता है )।

मार्कअप
(खुला बटन)

<button type="button" class="open-overlay">OPEN LAYER</button>

(ओवरले और क्लोज बटन)

<section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>

सीएसएस

.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }

जावास्क्रिप्ट (वेनिला-जेएस)

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;

  }, false);

});

---

अंत में, यहां एक और उदाहरण है जिसमें संपत्ति पर transitionलागू सीएसएस द्वारा ओवरले फीका-प्रभाव के साथ खुलता opacityहै। इसके अलावा एक padding-rightजब स्क्रॉलबार गायब हो जाता है अंतर्निहित पाठ पर एक पुनर्प्रवाहित से बचने के लिए लागू किया जाता है।

कोडपेन उदाहरण (फीका)

सीएसएस

.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     top: 0; left: 0; right: 0; bottom: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}

Comments

यह सही जवाब है। सही होने पर किसी को इसे चेक मार्क देना चाहिए।

— स्कूटर पी

यह बिल्कुल सही है, लेकिन चेतावनी दी जाए, यह मोबाइल सफारी में काम नहीं करता है। पृष्ठभूमि स्क्रॉल करती रहेगी और आपका ओवरले ठीक हो जाएगा।

— १०

यह बढ़िया काम करता है। स्क्रॉल करने योग्य व्यूपोर्ट कंटेनर divमें सीएसएस शैली होनी चाहिए position:fixed, और ऊर्ध्वाधर ओवरफ्लो स्क्रॉल करने योग्य होना चाहिए । मैंने सफलतापूर्वक उपयोग किया overflow-y:auto;और iOS गति / जड़ता स्क्रॉलिंग के लिए, मैंने -webkit-overflow-scrolling:touch;सीएसएस में जोड़ा । मैं प्रयोग किया जाता है display:block;, width:100%;और height:100%;सीएसएस एक पूरे पृष्ठ व्यूपोर्ट है।

— छिपकर जाना

क्षमा करें मै नहीं समझ पाया। शरीर को ओवरफ्लो करने के लिए सेट करना: छिपा हुआ मेरे iPad iOS7 पर लोचदार बॉडी स्क्रॉलिंग को अक्षम नहीं करता है। इसलिए मुझे अपने js में शामिल होना पड़ा: document.body.addEventListener ('टचमूव', फंक्शन (ईवेंट) {event.preventDefault ();}; false); जो SADLY को स्क्रॉल करने योग्य होने से भी सभी तत्वों को निष्क्रिय कर देता है। अब तक कोई समाधान नहीं मिला है (बिना अतिरिक्त प्लगइन्स के)

— गारावानी

यदि उपयोगकर्ता ने ओवरले सक्रिय होने पर पहले ही बॉडी को नीचे की ओर स्क्रॉल कर दिया है, तो जब आप ओवरफ्लो सेट करते हैं तो यह बॉडी को ऊपर की ओर कूदने का कारण बनेगा: छिपा हुआ; इसके आसपास कोई रास्ता?

— ब्योर्न एंडरसन

Answer 2

यदि आप ios पर ओवरक्रोलिंग को रोकना चाहते हैं, तो आप अपने .noscroll वर्ग में निश्चित स्थिति जोड़ सकते हैं

body.noscroll{
    position:fixed;
    overflow:hidden;
}

Comments

इस समाधान के साथ, निश्चित स्थिति के कारण, शरीर स्वचालित रूप से आपकी सामग्री के शीर्ष पर स्क्रॉल करेगा। यह आपके उपयोगकर्ताओं के लिए परेशान करने वाला हो सकता है।

— त्ज़ी

उपयोग करने के साथ एक और समस्या position:fixedयह है कि यह मेरे मुख्य शरीर का आकार बदल रहा था। शायद यह अन्य सीएसएस के साथ संघर्ष कर रहा था, लेकिन overflow:hiddenसभी की जरूरत थी

— Dex

जब आप इनपुट फ़ील्ड के माध्यम से टैब पर ध्यान केंद्रित कर रहे हैं, तो यह कूद रहा है

— Atav32

@ Atav32 एक अलग मुद्दे की तरह लगता है, स्थिति और अतिप्रवाह टैब क्रम को प्रभावित नहीं करना चाहिए।

— am80l

@ am80l खेद है कि मेरी पिछली टिप्पणी सुपर अस्पष्ट थी: टैब ऑर्डर काम करता है, लेकिन स्क्रीन को झटका देता है जब आप आईओएस सफारी ( stackoverflow.com/questions/31126330/… ) पर फ़ील्ड्स के माध्यम से टैब करते हैं

— Atav32

Answer 3

overflow: hidden;पर प्रयोग न करें body। यह स्वचालित रूप से शीर्ष पर सब कुछ स्क्रॉल करता है। जावास्क्रिप्ट की कोई आवश्यकता नहीं है। का उपयोग करें overflow: auto;। यह समाधान मोबाइल सफारी के साथ भी काम करता है:

HTML संरचना

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

स्टाइलिंग

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

यहां डेमो और सोर्स कोड यहां देखें ।

अपडेट करें:

उन लोगों के लिए जो कीबोर्ड स्पेस बार चाहते हैं, काम करने के लिए पेज अप / डाउन करें: आपको ओवरले पर ध्यान केंद्रित करने की आवश्यकता है, उदाहरण के लिए, उस पर क्लिक करना, या मैन्युअल रूप से JS इस divकीबोर्ड के जवाब देने से पहले उस पर ध्यान केंद्रित करना चाहिए । जब ओवरले "स्विच ऑफ" होता है, तब से ही यह ओवरले को साइड में ले जा रहा होता है। अन्यथा ब्राउज़र के लिए, ये सिर्फ दो सामान्य divएस हैं और यह नहीं पता होगा कि उनमें से किसी एक पर ध्यान केंद्रित क्यों करना चाहिए।

Comments

शांत समाधान, लेकिन फिर मुझे अपनी सभी सामग्री को एक डिव में लपेटने की ज़रूरत है, जो करने का मेरा कोई इरादा नहीं था ...

— याकूब राचुआ

यह एक आदर्श समाधान है। अगर किसी को इससे परेशानी हो रही है, तो आपको html, body { height: 100%; }इसके लिए सही तरीके से काम करने के लिए (डेमो में) जोड़ना पड़ सकता है।

— जॉन

@ user18490 कोणीय / भौतिक भाग का इस तथ्य से कोई लेना-देना नहीं है कि यह समाधान काम कर रहा है।

— लूसिया

यह मोबाइल उपकरणों को कई तरह से तोड़ता है (जैसे: URL- बार छिपाना, ओवरक्रोल अफोर्डेंस, ...), यहां तक ​​कि डेस्कटॉप पर स्क्रॉल करने के लिए स्पेसबार भी ।

— nitely

यह अधिक मजबूत विकल्प है, लेकिन यह चीजों को थोड़ा जटिल करता है। उदाहरण के लिए, पेजअप और पेजडाउन रिफ्रेश पर काम नहीं करेंगे। कुछ भी जो .offset()गणना के लिए मूल्यों का उपयोग करता है, गड़बड़ हो जाता है, आदि ...

— ब्लैकपैनर

Answer 4

overscroll-behavior सीएसएस संपत्ति सामग्री के ऊपर / नीचे पहुंचने पर ब्राउज़र के डिफ़ॉल्ट ओवरफ़्लो स्क्रॉल व्यवहार को ओवरराइड करने की अनुमति देता है।

बस ओवरले में निम्नलिखित शैलियों को जोड़ें:

.overlay {
   overscroll-behavior: contain;
   ...
}

कोडपेन डेमो

वर्तमान में Chrome, Firefox और IE ( caniuse) में काम करता है )

अधिक जानकारी के लिए Google डेवलपर लेख देखें ।

Comments

मैं आपको यह बताने के लिए सभी तरीके से आया हूं कि यह नवीनतम क्रोम, मोज़िला और ओपेरा पर काम कर रहा है। आपका समय अच्छा हो!

— वानाबे जावागीक

किसी को इस पर एक इनाम जोड़ना चाहिए। यह सही उपाय है। कोई जावास्क्रिप्ट आवश्यक नहीं है। :)

— joseph.l.hunsaker

इस समाधान के साथ समस्या यह है कि यह केवल तभी काम करता है जब ओवरले स्क्रॉल करने योग्य हो। यदि आपके पास एक मोडल है और यह सभी स्क्रीन पर फिट होता है तो अंदर कोई स्क्रॉल नहीं है - यह बॉडी स्क्रॉल को रोक नहीं पाएगा। वह और यह सफारी में भी काम नहीं करता है :)

— वाटरप्लेआ

मैं overflow-y: scroll(आपके कोडपेन डेमो से) इसके संयोजन के साथ बस गया । @Pokrishka द्वारा उठाया गया बिंदु वैध है, लेकिन मेरे मामले में यह चिंता का विषय नहीं है। किसी भी मामले में, मुझे आश्चर्य है कि यदि ब्राउज़र के कार्यान्वयन भविष्य में इस विवरण को कवर करने जा रहे हैं। मैंने पाया कि फ़ायरफ़ॉक्स में, ब्राउज़र का आकार बदलना ताकि मोडल स्क्रीन पर फिट न हो और फिर से इसे फिर से आकार दे ताकि यह इस संपत्ति को काम करता है (यानी स्क्रॉल निहित है) पूर्ण आकार के आकार बदलने के बाद भी - जब तक पृष्ठ पुनः लोड नहीं किया जाता , कम से कम।

— मार्क.2377

Answer 5

अधिकांश समाधानों में यह समस्या है कि वे स्क्रॉल स्थिति को बनाए नहीं रखते हैं, इसलिए मैंने इस बात पर ध्यान दिया कि फेसबुक इसे कैसे करता है। अंडरलेइंग सामग्री को position: fixedसेट करने के अलावा, वे स्क्रॉल स्थिति को बनाए रखने के लिए गतिशील रूप से शीर्ष सेट करते हैं:

scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';

फिर, जब आप ओवरले को फिर से हटाते हैं, तो आपको स्क्रॉल स्थिति रीसेट करने की आवश्यकता होती है:

window.scrollTo(0, scrollPosition);

मैंने इस समाधान को प्रदर्शित करने के लिए एक छोटा सा उदाहरण बनाया

let overlayShown = false;
let scrollPosition = 0;

document.querySelector('.toggle').addEventListener('click', function() {
  if (overlayShown) {
		showOverlay();
  } else {
    removeOverlay();
  }
  overlayShown = !overlayShown;
});

function showOverlay() {
    scrollPosition = window.pageYOffset;
  	const mainEl = document.querySelector('.main-content');
    mainEl.style.top = -scrollPosition + 'px';
  	document.body.classList.add('show-overlay');
}

function removeOverlay() {
		document.body.classList.remove('show-overlay');
  	window.scrollTo(0, scrollPosition);
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = 0;
}

.main-content {
  background-image: repeating-linear-gradient( lime, blue 103px);
  width: 100%;
  height: 200vh;
}

.show-overlay .main-content {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: scroll; /* render disabled scroll bar to keep the same width */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.show-overlay .overlay {
  display: block;
}

.overlay-content {
  margin: 50px;
  background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px);
  height: 120vh;
}

.toggle {
  position: fixed;
  top: 5px;
  left: 15px;
  padding: 10px;
  background: red;
}

/* reset CSS */
body {
  margin: 0;
}

<main class="main-content"></main>

  <div class="overlay">
    <div class="overlay-content"></div>
  </div>
  
  <button class="toggle">Overlay</button>

Comments

यह मुझे सबसे सुरुचिपूर्ण समाधान लगता है। मुझे पता है कि Google पृष्ठ को स्क्रॉल करने और तत्वों को अक्सर स्थानांतरित करने के समान चालें नियुक्त करता है।

— forallepsilon

यह एक और एकमात्र समाधान है जिसने मेरे लिए 100% सही काम किया है, काश मुझे यह उत्तर पहले मिल जाता।

— user0103

Answer 6

यह ध्यान देने योग्य है कि कभी-कभी शरीर के टैग में "अतिप्रवाह: छिपा हुआ" जोड़ने से काम नहीं होता है। उन मामलों में, आपको संपत्ति को html टैग में भी जोड़ना होगा।

html, body {
    overflow: hidden;
}

Comments

IOS के लिए आपको भी स्थापित करने की आवश्यकताwidth: 100%; height: 100%;

— गेविन

यह इस प्रश्न के लिए कई अन्य समाधानों में देखी गई एक समस्या को भी संबोधित नहीं करता है - अगर विंडो को कहीं भी स्क्रॉल किया गया है लेकिन पृष्ठ का शीर्ष जब मोडल खुला होता है, तो यह पृष्ठ के शीर्ष पर स्क्रॉल का कारण होगा। मैं फिलिप Mitterer के समाधान पाया यहाँ सबसे अच्छा विकल्प है कि ज्यादातर मामलों को शामिल किया गया हो।

— CLL

आपने (या तो वेब या मोबाइल पर) इस मुद्दे का अनुभव नहीं किया है। क्या आप पूर्ण कोड (DOM के साथ) साझा कर सकते हैं जो एक फ़िडेल या jsbin में काम नहीं करता है? किसी भी मामले में, मैं इस समस्या से निपटने के लिए जावास्क्रिप्ट वर्कअराउंड का उपयोग करने से सावधान हूं।

— फ्रांसिस्को हॉज

Answer 7

आम तौर पर, यदि आप एक माता-पिता (इस मामले में शरीर) को स्क्रॉल करने से रोकना चाहते हैं, जब एक बच्चा (इस मामले में ओवरले) स्क्रॉल करता है, तो बच्चे को माता-पिता को सहलाने दें ताकि स्क्रॉल घटना को बुदबुदाती से रोका जा सके। माता पिता। माता-पिता के शरीर होने के मामले में, इसके लिए एक अतिरिक्त आवरण तत्व की आवश्यकता होती है:

<div id="content">
</div>
<div id="overlay">
</div>

देखें ब्राउज़र की मुख्य स्क्रॉलबार साथ स्क्रॉल विशेष DIV सामग्री अपने काम करने को देखने के लिए।

Comments

सबसे अच्छा समाधान, सच "बॉक्स से बाहर" सोच, बस इतनी अच्छी तरह से नियंत्रित नहीं।

— मार्क

यदि शरीर वह तत्व नहीं है जो स्क्रॉल करता है, तो टॉपबार मोबाइल पर स्लाइड नहीं करेंगे क्योंकि आप पृष्ठ में नीचे स्क्रॉल करेंगे।

— रीड

Answer 8

चुना गया उत्तर सही है, लेकिन इसकी कुछ सीमाएँ हैं:

• आपकी उंगली के साथ सुपर हार्ड "फ्लिंग्स" अभी भी स्क्रॉल करेंगे <body> पृष्ठभूमि में
• <input>मोडल में टैप करके वर्चुअल कीबोर्ड खोलना भविष्य के सभी स्क्रॉल को निर्देशित करेगा<body>

मेरे पास पहले अंक के लिए कोई फिक्स नहीं है, लेकिन दूसरे पर कुछ प्रकाश डालना चाहता हूं। भ्रामक रूप से, बूटस्ट्रैप में कीबोर्ड की समस्या का दस्तावेज होता था, लेकिन उन्होंने दावा किया कि यह तय था, http://output.jsbin.com/cacido/quiet का हवाला देते हुए जो तय के एक उदाहरण के रूप में ।

वास्तव में, यह उदाहरण मेरे परीक्षणों के साथ iOS पर ठीक काम करता है। हालाँकि, इसे नवीनतम बूटस्ट्रैप (v4) में अपग्रेड करने से यह टूट जाता है।

यह पता लगाने की कोशिश में कि उनके बीच क्या अंतर था, मैंने बूटस्ट्रैप, http://codepen.io/WestonThayer/pen/bgZxBG पर निर्भर रहने के लिए एक परीक्षण मामले को कम कर दिया ।

निर्णायक कारक विचित्र हैं। कीबोर्ड की समस्या से बचने के लिए लगता है कि मोडल वाले रूट पर सेट background-color नहीं है और मोडल की सामग्री को दूसरे में नेस्ट किया जाना चाहिए , जो सेट हो सकता है ।<div><div>background-color

इसका परीक्षण करने के लिए, कोड लाइन उदाहरण में नीचे की लाइन को अनलाइक करें:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* UNCOMMENT TO BREAK */
/*   background-color: white; */
}

Answer 9

स्पर्श उपकरणों के लिए, 101vhओवरले के आवरण में 1px चौड़ी, न्यूनतम ऊंचाई वाली पारदर्शी डिव को जोड़ने का प्रयास करें । फिर जोड़िए-webkit-overflow-scrolling:touch; overflow-y: auto; रैपर में । यह ओवरले उपर स्क्रॉल करने योग्य है, इस प्रकार मोबाइल सफारी इस प्रकार शरीर से स्पर्श घटना को रोकती है।

यहाँ एक नमूना पृष्ठ है। मोबाइल सफारी पर खोलें: http://www.originalfunction.com/overlay.html

https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f

Comments

बृहस्पति, कि चाल किया। -webkit-overflow-scrolling:touch;स्पर्श घटनाओं को रोकने के लिए बस प्रत्येक स्क्रॉल करने योग्य कंटेनर के लिए जोड़ना था ।

— मति

मैं अभी भी iPhone पर स्क्रॉल करने में सक्षम हूं

— सिमोन ज़ैंडारा

@SeniorSimoneZandara मैं नहीं हूँ। यह पृष्ठभूमि स्क्रॉल को रोकने के लिए ठीक काम करता है

— Godblessstrawberry

Answer 10

जिस व्यवहार को आप रोकना चाहते हैं, उसे स्क्रॉल चेनिंग कहा जाता है। इसे अक्षम करने के लिए, सेट करें

overscroll-behavior: contain;

CSS में आपके ओवरले पर।

Answer 11

मैंने इस सवाल को Ipad और Iphone पर अपने पृष्ठ के साथ मेरे द्वारा जारी किए गए मुद्दे को हल करने की कोशिश करते हुए पाया - जब मैं छवि के साथ पॉपअप के रूप में निश्चित div प्रदर्शित कर रहा था तो शरीर स्क्रॉल कर रहा था।

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

आईओएस सफारी के रबर बैंड स्क्रॉलिंग के बारे में छह बातें जो मैंने सीखीं

जैसा कि यह सुझाव दिया गया था कि मैं ब्लॉग पोस्ट के प्रमुख बिंदुओं को शामिल करता हूं, यदि लिंक पुराना हो जाता है।

"यह अक्षम करने के लिए कि उपयोगकर्ता मेनू को स्क्रॉल कर सकता है जबकि" मेनू खुला है ", यह नियंत्रित करना संभव है कि किन तत्वों को स्क्रॉल किया जाए या नहीं, कुछ जावास्क्रिप्ट और एक सीएसएस क्लास लगाकर।

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

 document.ontouchmove = function ( event ) {

    var isTouchMoveAllowed = true, target = event.target;

    while ( target !== null ) {
        if ( target.classList && target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }

    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};

और फिर डिसएबल-स्क्रॉलिंग क्लास को पेज डिव पर डालें:

<div class="page disable-scrolling">

Answer 12

आप आसानी से कुछ "नए" सीएसएस और JQuery के साथ ऐसा कर सकते हैं।

प्रारंभ में: body {... overflow:auto;} JQuery के साथ आप गतिशील रूप से 'ओवरले' और 'बॉडी' के बीच स्विच कर सकते हैं। जब 'शरीर' पर, का उपयोग करें

body {
   position: static;
   overflow: auto;
}

जब 'ओवरले' का उपयोग करें

body {
   position: sticky;
   overflow: hidden;
}

स्विच के लिए JQuery ('शरीर' -> 'ओवरले'):

$("body").css({"position": "sticky", "overflow": "hidden"});

स्विच के लिए JQuery ('ओवरले' -> 'बॉडी'):

$("body").css({"position": "static", "overflow": "auto"});

Answer 13

मैं पिछले उत्तरों को जोड़ना चाहूंगा क्योंकि मैंने ऐसा करने की कोशिश की थी, और जैसे ही मैंने शरीर को स्थिति पर स्विच किया कुछ लेआउट टूट गया: तय हो गया। इससे बचने के लिए, मुझे शरीर की ऊंचाई भी 100% निर्धारित करनी थी:

function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}

Answer 14

निम्नलिखित HTML का उपयोग करें:

<body>
  <div class="page">Page content here</div>
  <div class="overlay"></div>
</body>

तब जावास्क्रिप्ट अवरोधन और स्क्रॉल करना बंद कर देता है:

$(".page").on("touchmove", function(event) {
  event.preventDefault()
});

फिर चीजों को सामान्य करने के लिए:

$(".page").off("touchmove");

Answer 15

अगर इरादा मोबाइल / टच डिवाइस को डिसेबल करने का है तो इसे करने का सबसे सीधा तरीका है touch-action: none;।

उदाहरण:

const app = document.getElementById('app');
const overlay = document.getElementById('overlay');

let body = '';

for (let index = 0; index < 500; index++) {
  body += index + '<br />';
}

app.innerHTML = body;
app.scrollTop = 200;

overlay.innerHTML = body;

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#app {
  background: #f00;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  line-height: 20px;
}

#overlay {
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 0 0 100px;
  overflow: scroll;
}

<div id='app'></div>
<div id='overlay'></div>

(उदाहरण स्टैक ओवरफ्लो के संदर्भ में काम नहीं करता है। आपको इसे स्टैंड-अलोन पेज में फिर से बनाने की आवश्यकता होगी।)

यदि आप #appकंटेनर की स्क्रॉलिंग को अक्षम करना चाहते हैं , तो बस जोड़ें touch-action: none;।

Comments

अगर टच एक्शन वास्तव में iOS पर काम करता है। और उस स्थिति में एक अलग div में अपने पूरे "app" को लपेटने की आवश्यकता नहीं होगी।

— पॉवरबॉय 18

Answer 16

इसे इस्तेमाल करे

var mywindow = $('body'), navbarCollap = $('.navbar-collapse');    
navbarCollap.on('show.bs.collapse', function(x) {
                mywindow.css({visibility: 'hidden'});
                $('body').attr("scroll","no").attr("style", "overflow: hidden");
            });
            navbarCollap.on('hide.bs.collapse', function(x) {
                mywindow.css({visibility: 'visible'});
                $('body').attr("scroll","yes").attr("style", "");
            });

Answer 17

यदि आप बॉडी / html स्क्रॉल ऐड को निम्न के रूप में रोकना चाहते हैं

सीएसएस

    html, body {
        height: 100%;
    }

    .overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);

        .overlay-content {
            height: 100%;
            overflow: scroll;
        }
    }

    .background-content{
        height: 100%;
        overflow: auto;
    }

एचटीएमएल

    <div class="overlay">
        <div class="overlay-content"></div>
    </div>

    <div class="background-content">
        lengthy content here
    </div>

असल में, आप इसे जेएस के बिना कर सकते हैं।

मुख्य विचार html / शरीर को ऊंचाई के साथ जोड़ना है: 100% और अतिप्रवाह: ऑटो। और आपके ओवरले के अंदर, आप अपनी आवश्यकता के आधार पर स्क्रॉल को सक्षम / अक्षम कर सकते हैं।

उम्मीद है की यह मदद करेगा!

Answer 18

मेरे मामले में, इनमें से किसी भी समाधान ने iPhone (iOS 11.0) पर काम नहीं किया।

एकमात्र प्रभावी फिक्स जो मेरे सभी उपकरणों पर काम कर रहा है, वह यह है - ios-10-safari-रोका-स्क्रॉलिंग-पीछे-ए-निश्चित-ओवरले और एंड-स्क्रॉल-स्थिति

Answer 19

स्क्रॉल बार को अक्षम और सक्षम करने के लिए नीचे दिए गए कोड का उपयोग करें।

Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();