मोडल खुलने पर बॉडी को स्क्रॉल करने से रोकें

347

मैं चाहता हूं कि मेरी वेबसाइट पर मोडल ( http://twitter.github.com/bootstrap से ) का उपयोग करते समय मेरी बॉडी स्क्रॉलिंग को रोक दे ।

मैंने नीचे दिए गए जावास्क्रिप्ट के टुकड़े को कॉल करने की कोशिश की है जब मोडल खोला जाता है लेकिन सफलता के बिना

$(window).scroll(function() { return false; });

तथा

$(window).live('scroll', function() { return false; });

कृपया ध्यान दें कि हमारी वेबसाइट IE6 के लिए समर्थन को गिरा देती है, IE7 + को हालांकि संगत होने की आवश्यकता है।

— xorinzor
स्रोत

469

बूटस्ट्रैप modalस्वचालित रूप से वर्ग modal-openको शरीर में जोड़ता है जब एक मोडल संवाद दिखाया जाता है और संवाद छिपाए जाने पर इसे हटा देता है। इसलिए आप अपने सीएसएस में निम्नलिखित जोड़ सकते हैं:

body.modal-open {
    overflow: hidden;
}

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

अपडेट 8 वीं फेब, 2013
यह अब ट्विटर बूटस्ट्रैप v। 2.3.0 में काम करना बंद कर दिया है - वे अब modal-openशरीर में क्लास नहीं जोड़ते हैं ।

मोडल दिखाए जाने के समय एक वर्ग को शरीर में जोड़ना होगा, और मोडल के बंद होने पर इसे हटा दें:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

अपडेट 11 मार्च, 2013 ऐसा लगता है कि modal-openकक्षा बूटस्ट्रैप 3.0 में वापस आ जाएगी, स्पष्ट रूप से स्क्रॉल को रोकने के उद्देश्य से:

शरीर पर पुन: प्रदर्शित करता है। शरीर में खुला होना (ताकि हम वहां स्क्रॉल कर सकें)

इसे देखें: https://github.com/twitter/bootstrap/pull/6342 - मोडल अनुभाग देखें।

— MartinHN
स्रोत

2

यह बूटस्ट्रैप 2.2.2 में काम नहीं करता है। उम्मीद है कि .मोडल-ओपन भविष्य में वापस आएगा ... github.com/twitter/bootstrap/issues/5719

— ppetrid

2

@ppetrid मुझे उम्मीद नहीं है कि यह वापस आएगा। इस लेखन के आधार पर: github.com/twitter/bootstrap/wiki/Upcoming-3.0-changes (नीचे देखें)। उद्धरण: "कोई और अधिक आंतरिक मोडल स्क्रॉलिंग नहीं है। इसके बजाय, मोडल अपनी सामग्री और पेज स्क्रॉल टू मोडल को घर में बढ़ाएंगे।"

— मार्टिनएच

2

@ बागाटा कूल - modal-openबूटस्ट्रैप 3 में वापस आ जाएगा, इसलिए जब यह लॉन्च होता है तो उपरोक्त कोड को हटाने के लिए इसे सुरक्षित होना चाहिए।

— मार्टिनएच

2

यही कारण है कि किसी को नीचे स्क्रॉल करना चाहिए, अगर चुना हुआ जवाब आपको संतुष्ट नहीं करता है, तो संभावना है कि आप इन जैसे रत्नों को खोजने जा रहे हैं। उम्मीद नहीं की थी कि 97+ वोट वाले उत्तर अन्य कम पसंद किए गए टिप्पणियों के तहत इतने गहरे दबे हुए हैं।

— मोहम्मद अब्दुल मुजीब

2

इसके साथ समस्या यह है कि दस्तावेज़ को शीर्ष पर स्क्रॉल करने से रोकने के लिए जब एक मोडल खोला जाता है, तो आपको body.modal- ओपन {ओवरफ़्लो: दृश्यमान} को जोड़ने की आवश्यकता होती है। आपका समाधान इस समय काम करता है, एक नकारात्मक मोड खुलने के बाद दस्तावेज़ नीचे की ओर ऊपर की ओर स्क्रॉल करता है

— patrick

120

स्वीकृत उत्तर मोबाइल (iOS 7 w / Safari 7, कम से कम) पर काम नहीं करता है और मैं नहीं चाहता कि MOAR जावास्क्रिप्ट मेरी साइट पर चल रहा हो जब CSS काम करेगा।

यह CSS पृष्ठभूमि पृष्ठ को मोडल के नीचे स्क्रॉल करने से रोकेगा:

body.modal-open {
    overflow: hidden;
    position: fixed;
}

हालाँकि, इसमें शीर्ष पर अनिवार्य रूप से स्क्रॉल करने का हल्का साइड-इफ़ेक्ट भी है। position:absoluteइसे हल करता है लेकिन, मोबाइल पर स्क्रॉल करने की क्षमता को फिर से पेश करता है।

यदि आप अपना व्यूपोर्ट (व्यूपोर्ट जोड़ने के लिए मेरा प्लगइन<body> ) जानते हैं, तो आप सिर्फ एक सीएसएस टॉगल जोड़ सकते हैं position।

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

मैं यह भी जोड़ता हूं कि अंतर्निहित पृष्ठ को मोडल दिखाते / छुपाते समय बाएं / दाएं कूदने से रोकता है।

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

यह उत्तर एक एक्स-पोस्ट है।

— चपटी कील
स्रोत

7

धन्यवाद! मोबाइल (कम से कम iOS और Android देशी ब्राउज़र) मुझे सिरदर्द दे रहे थे और position: fixedशरीर के बिना काम नहीं करेंगे ।

— राउल रेने

मोडल दिखाते / छुपाते समय पेज को बाएं / दाएं कूदने से रोकने के लिए कोड सहित धन्यवाद। यह अत्यंत उपयोगी था और मैंने यह सत्यापित किया कि मैं iPhone 5c पर iOS 9.2.1 चल रहे सफारी पर एक समस्या को हल करता हूं।

— एलिजा लोफग्रेन

6

शीर्ष पर स्क्रॉलिंग को ठीक करने के लिए, आप कक्षा को जोड़ने से पहले स्थिति को रिकॉर्ड कर सकते हैं, फिर कक्षा को हटा दिए जाने के बाद, window.scroll to record स्थिति में जाएं। यह है कि मैंने इसे अपने लिए कैसे तय किया: pastebin.com/Vpsz07zd ।

— टूल

हालांकि मुझे लगता है कि यह केवल बहुत बुनियादी जरूरतों के लिए फिट होगा, यह एक उपयोगी फिक्स था। धन्यवाद।

— स्टीव बेनर

33

बस शरीर के अतिप्रवाह को छिपाएं और यह शरीर को स्क्रॉल नहीं करता है। जब आप मोडल छिपाते हैं, तो उसे स्वचालित पर वापस लाएँ।

यहाँ कोड है:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

— मेहमत फतिह येलदिज़
स्रोत

अति उत्कृष्ट! इससे मुझे मदद मिली। धन्यवाद।

— pfcodes

21

आप ओवरफ्लो के साथ विंडो आकार में बॉडी साइज सेट करने की कोशिश कर सकते हैं: जब मोडल खुला हो तो छिपा हुआ

— charlietfl
स्रोत

12

ऐसा करने से हर बार मोडल खुलने पर स्क्रीन हिल जाएगी, यह सुविधाजनक नहीं है, मुझे बस बैकग्राउंड स्क्रॉल को अक्षम करना होगा

— xorinzor

यकीन नहीं है कि आप स्क्रॉल कर सकते हैं ब्राउज़र से संबंधित हैं और आप उनके साथ बहुत कुछ नहीं कर सकते हैं

— charlietfl

आप मोडल को "फिक्स्ड" पर सेट कर सकते हैं इसलिए स्क्रॉल करते समय यह नहीं

— चलेगा

8

स्क्रॉलिंग से मोडल को रोकने के बारे में नहीं, इसके बारे में स्क्रॉलिंग से बैकग्राउंड में बॉडी को रोकने के बारे में

— xorinzor

1

यह खिड़की है जो स्क्रॉल करती है यदि शरीर इसे ओवरफ्लो करता है। उदाहरण के लिए स्क्रॉलबार दस्तावेज़ का हिस्सा नहीं हैं।

— charlietfl

18

आपको @ charlietfl के उत्तर को पार करने और स्क्रॉलबार के लिए खाते से बाहर जाने की आवश्यकता है, अन्यथा आप एक दस्तावेज़ reflow देख सकते हैं।

मोडल खोलना:

bodyचौड़ाई रिकॉर्ड करें
bodyओवरफ्लो सेट करेंhidden
स्पष्ट रूप से शरीर की चौड़ाई निर्धारित करें कि यह चरण 1 में क्या था।
```
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);
```

मोडल को बंद करना:

bodyओवरफ्लो सेट करेंauto

की bodyचौड़ाई निर्धारित करेंauto

var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");

से प्रेरित: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

— jpap
स्रोत

मुझे बेहतर कार्यकाल की कमी के लिए "उछल-कूद" वाली स्क्रीन मिल रही थी और मेरे लिए यहां की चौड़ाई चौड़ाई सेटिंग्स का पालन कर रही थी। अनेक अनेक धन्यवाद।

— Hcabnettek

1

@ हेबैनेटेक येप: "जम्पी" == "डॉक्यूमेंट रिफ्लो"। खुशी है कि यह आपकी मदद की! :-)

— जपप

क्या इसके लिए कोई css समाधान है? क्या यह सभी ब्राउज़र और मोबाइल में काम करता है?

— रूब

बस एक टाइपो: यह $body.css("overflow", "auto");आखिरी चरण में होना चाहिए :)

— schneikai

अरे यार, क्या शानदार आइडिया है। @jpap ने मुझे लंबे समय के लिए डॉक्यूमेंट करने वाले डॉक्यूमेंट रिफ्लो मुद्दे को सुलझाने में मेरी मदद की।

— गोरान रादुलोविक

17

चेतावनी: नीचे का विकल्प बूटस्ट्रैप v3.0.x के लिए प्रासंगिक नहीं है, क्योंकि उन संस्करणों में स्क्रॉलिंग स्पष्ट रूप से मोडल तक ही सीमित है। यदि आप पहिया घटनाओं को अक्षम करते हैं, तो आप अनजाने में कुछ उपयोगकर्ताओं को उन मॉडल्स में सामग्री को देखने से रोक सकते हैं, जिनकी व्यूपोर्ट ऊँचाई से अधिक ऊँचाई है।

फिर भी एक और विकल्प: व्हील इवेंट्स

पुस्तक घटना रद्द करने योग्य नहीं है। हालांकि मूसवेल और व्हील इवेंट को रद्द करना संभव है । बड़ी चेतावनी यह है कि सभी विरासत ब्राउज़र उनका समर्थन नहीं करते हैं, मोज़िला हाल ही में गेको 17.0 में बाद के लिए समर्थन जोड़ रहा है। मुझे पूर्ण प्रसार का पता नहीं है, लेकिन IE6 + और Chrome उनका समर्थन करते हैं।

यहां उनका लाभ उठाने का तरीका बताया गया है:

$('#myModal')
  .on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {
      return false;
    });
  })
  .on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
  });

JSFiddle

— मर्व
स्रोत

आपका JSFiddle फ़ायरफ़ॉक्स 24, क्रोम 24 और न ही IE9 पर काम नहीं करता है।

— 15

@AxeEffect को अब काम करना चाहिए। एकमात्र मुद्दा यह था कि बूटस्ट्रैप लाइब्रेरी के बाहरी संदर्भ बदल गए थे। सर उठाने के लिए धन्यवाद।

— मर्व

2

यह स्पर्श उपकरणों को स्क्रॉल करने से नहीं रोकता है, overflow:hiddenअब के लिए बेहतर है।

— वेबिनन

5

वे सभी काम कर रहे हैं लेकिन मोबाइल उपकरणों के लिए नहीं। -__- एंड्रॉइड 4.1 और क्रोम

— टॉवर जिमी

@TowerJimmy आपको संभवतः उसके लिए स्पर्श या ड्रैग इवेंट रद्द करना होगा (यदि यह भी संभव है)

— xorinzor

9

/* =============================
 * Disable / Enable Page Scroll
 * when Bootstrap Modals are
 * shown / hidden
 * ============================= */

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

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

function disable_scroll() {
  if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', theMouseWheel, false);
  }
  window.onmousewheel = document.onmousewheel = theMouseWheel;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;  
}

$(function () {
  // disable page scrolling when modal is shown
  $(".modal").on('show', function () { disable_scroll(); });
  // enable page scrolling when modal is hidden
  $(".modal").on('hide', function () { enable_scroll(); });
});

— jparkerweb
स्रोत

9

केवल CSS बदलकर Chrome पर काम नहीं कर सका, क्योंकि मैं नहीं चाहता था कि पृष्ठ शीर्ष पर वापस स्क्रॉल करे। यह ठीक काम किया:

$("#myModal").on("show.bs.modal", function () {
  var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
  var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});

— Tetsuo
स्रोत

1

यह एकमात्र समाधान है जिसने बूटस्ट्रैप 3.2 पर मेरे लिए काम किया है।

— 20 अक्टूबर को volx757

1

कोणीय सामग्री के साथ शीर्ष मुद्दे के लिए कूद था। यह एकमात्र उत्तर था जो सभी मामलों में काम करता है (डेस्कटॉप / मोबाइल + मोडल / सिडेनव में स्क्रॉल करने की अनुमति देता है + बिना कूद के तय किए गए शरीर स्क्रॉल स्थिति को छोड़ दें)।

— cYrixmorten

यह भी केवल समाधान है कि वास्तव में मेरे लिए काम किया है। tx

— डिडज़

9

इसको आजमाओ:

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

यह मेरे लिए काम किया। (IE8 का समर्थन करता है)

— fatCop
स्रोत

4

यह काम करता है, लेकिन जब आप उपयोग करते समय एक मोडल खोलते हैं तो आप शीर्ष पर कूद जाते हैं position: fixed।

— एलेक्सियोवे

8

के लिए बूटस्ट्रैप , आप कोशिश कर सकते हैं इस (पर काम कर रहे Firefox, Chromeऔर Microsoft Edge):

body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

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

— मूरत येल्ड्ज़
स्रोत

7

जावास्क्रिप्ट के साथ 'टैग-मोडल-ओपेन' या बॉडी टैग की शैली को संशोधित करना ठीक है और यह काम करेगा। लेकिन हम जिस समस्या का सामना करते हैं वह यह है कि जब शरीर अतिप्रवाह हो जाता है: छिपी हुई है, तो यह शीर्ष पर कूद जाएगा, (स्क्रॉलटॉप 0 हो जाएगा)। यह बाद में एक प्रयोज्य मुद्दा बन जाएगा।

इस समस्या के समाधान के रूप में, बॉडी टैग के अतिप्रवाह को बदलने के बजाय: छुपे हुए इसे html टैग पर बदलें

$('#myModal').on('shown.bs.modal', function () {
  $('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
  $('html').css('overflow','auto');
});

— जसीम अब्दुल लतीफ
स्रोत

1

यह बिल्कुल सही उत्तर है क्योंकि सामान्य सर्वसम्मति का उत्तर पृष्ठ को शीर्ष पर स्क्रॉल करता है जो एक भयानक उपयोगकर्ता अनुभव है। आपको इस पर एक ब्लॉग लिखना चाहिए। मैंने इसे वैश्विक समाधान में बदल दिया।

— स्मिथ

6

मुझे इस कोड के बारे में निश्चित नहीं है, लेकिन यह एक शॉट के लायक है।

JQuery में:

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

जैसा कि मैंने पहले कहा था, मैं 100% निश्चित नहीं हूं लेकिन फिर भी कोशिश करता हूं।

— अनीश गुप्ता
स्रोत

1

यह मोडल को खोलने के दौरान शरीर को स्क्रॉल करने से रोकता नहीं है

— xorinzor

@xorinzor आपने charlietfl के जवाब के कमेंट सेक्शन में कहा है कि यह काम करता है। लेकिन आपने कहा: यह मोडल को खोलते समय शरीर को स्क्रॉल करने से नहीं रोकता है।

— अनिश गुप्ता

सच है, लेकिन अब इसके लिए एकमात्र समाधान जो आंशिक रूप से काम करता है और मैं इसके साथ ठीक हूं। इस कारण से मैंने उसकी प्रतिक्रिया को उत्तर के रूप में चिह्नित किया क्योंकि वह पहले उत्तर के साथ था।

— xorinzor 8

@xorinzor वास्तव में, मैंने सोचा कि मैंने उसके / उसके सामने उत्तर दिया, कुछ अजीब गड़बड़ हो सकती है। हालांकि इसका जुर्माना

— अनीश गुप्ता

5

नवंबर 2017 तक क्रोम ने एक नई सीएसएस संपत्ति पेश की

overscroll-behavior: contain;

जो इस समस्या को हल करता है, हालांकि लेखन में क्रॉस ब्राउज़र समर्थन सीमित है।

पूर्ण विवरण और ब्राउज़र समर्थन के लिए नीचे दिए गए लिंक देखें

— user1095118
स्रोत

4

सबसे अच्छा समाधान css- केवल body{overflow:hidden}समाधान है जिसका उपयोग इनमें से अधिकांश उत्तरों द्वारा किया जाता है। कुछ उत्तर एक फिक्स प्रदान करते हैं जो गायब स्क्रॉलबार के कारण "कूद" को भी रोकते हैं; हालाँकि, कोई भी बहुत सुंदर नहीं थे। इसलिए, मैंने इन दो कार्यों को लिखा है, और वे बहुत अच्छी तरह से काम करते हैं।

var $body = $(window.document.body);

function bodyFreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('overflow', 'hidden');
    $body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}

function bodyUnfreezeScroll() {
    var bodyWidth = $body.innerWidth();
    $body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
    $body.css('overflow', 'auto');
}

की जाँच करें इस jsFiddle प्रयोग में यह देखने के लिए।

— स्टीफन एम। हैरिस
स्रोत

यह इतना पुराना नहीं है, लेकिन इसमें से कोई भी मेरे लिए काम नहीं कर रहा है यहां तक कि मैं अभी भी खिड़की को स्क्रॉल नहीं कर सकता हूं, मुझे क्या याद आ रही है?

— उतरा

मोडल को कुछ बार खोलें और बंद करें, और मुख्य हरा DIV सिकुड़ता और सिकुड़ता है!

— वेबिन

@Webinan क्रोम में यह मैं Win7 पर नहीं देख रहा हूं। आपका ब्राउज़र और व्यूपोर्ट का आकार क्या है?

— स्टीफन एम। हैरिस

1

@ हरिकर्म लगभग 20 बार खुलने और बंद होने के बाद ग्रीन डिव की चौड़ाई open modalबटन की चौड़ाई के बराबर हो जाती है । क्रोम पर 8

— वेबिनान

@ Jpap के उत्तर के समान ( stackoverflow.com/a/16451821/5516499 ) लेकिन अतिरिक्त बग के साथ। :-(

— किवी शापिरो

4

कई लोग शरीर पर "अतिप्रवाह: छिपी" का सुझाव देते हैं, जो काम नहीं करेगा (कम से कम मेरे मामले में नहीं), क्योंकि यह वेबसाइट को शीर्ष पर स्क्रॉल करेगा।

यह वह समाधान है जो मेरे लिए काम करता है (मोबाइल फोन और कंप्यूटर दोनों पर), jQuery का उपयोग करके:

    $('.yourModalDiv').bind('mouseenter touchstart', function(e) {
        var current = $(window).scrollTop();
        $(window).scroll(function(event) {
            $(window).scrollTop(current);
        });
    });
    $('.yourModalDiv').bind('mouseleave touchend', function(e) {
        $(window).off('scroll');
    });

यह काम करने के लिए मोडल की स्क्रॉलिंग करेगा, और एक ही समय में वेबसाइट को स्क्रॉल करने से रोकेगा।

— Danie
स्रोत

ऐसा लगता है कि यह समाधान इस iOS बग को भी ठीक करता है: hackernoon.com/…

— Gotenks

3

आप निम्नलिखित तर्क का उपयोग कर सकते हैं, मैंने इसका परीक्षण किया और यह काम करता है (यहां तक कि IE में भी)

   <html>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
}


$(function(){

        $('#locker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).bind('scroll',lockscroll);

        })  


        $('#unlocker').click(function(){
            currentScroll=$(window).scrollTop();
            $(window).unbind('scroll');

        })
})

</script>

<div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

— myriacl
स्रोत

2

मुझे यकीन नहीं है कि यह 100% बूटस्ट्रैप के साथ काम करेगा, लेकिन एक कोशिश के लायक है - इसने Remodal.js के साथ काम किया, जो github पर पाया जा सकता है: http://vodkabears.github.io/remodal/ और यह तरीकों के लिए समझ में आता है। बहुत समान होने के लिए।

पेज को ऊपर की ओर कूदने से रोकने के लिए और सामग्री के सही बदलाव को रोकने के bodyलिए मोडल को निकाल दिए जाने पर एक वर्ग जोड़ें और इन सीएसएस नियमों को सेट करें:

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

यह सही सामग्री के कूदने को रोकने के लिए position:staticऔर height:autoवह संयोजन है। overflow-y:hidden;मॉडल के पीछे स्क्रॉल करने योग्य होने से पेज बंद हो जाता है।

— AdamJB
स्रोत

यह समाधान मेरे लिए सफारी 11.1.1, क्रोम 67.0.3396.99 और फ़ायरफ़ॉक्स 60.0.2 में पूरी तरह से काम करता है। धन्यवाद!

— डोम

2

इस फिडेल के आधार पर: http://jsfiddle.net/dh834zgw/1/

निम्नलिखित स्निपेट (jquery का उपयोग करके) विंडो स्क्रॉल को अक्षम कर देगा:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

और आपकी सीएसएस में:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

अब जब आप मोडल को हटाते हैं, तो html टैग पर noscroll वर्ग को हटाना न भूलें:

$('html').toggleClass('noscroll');

— एक प्रकार का वृक्ष
स्रोत

overflowसेट नहीं होना चाहिए hidden? +1 हालांकि यह मेरे लिए काम कर रहा था (उपयोग करते हुए hidden)।

— मुलहस '

2

मेरे पास एक साइडबार था जो चेकबॉक्स हैक द्वारा उत्पन्न किया गया था। लेकिन मुख्य विचार दस्तावेज़ स्क्रॉल को सहेजना है और विंडो को स्क्रॉल करने के दौरान इसे बदलना नहीं है।

जब शरीर 'अतिप्रवाह: छिपा हुआ' हो जाता है तो मुझे पृष्ठ कूदना पसंद नहीं था।

window.addEventListener('load', function() {
    let prevScrollTop = 0;
    let isSidebarVisible = false;

    document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
        
        prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        isSidebarVisible = event.target.checked;

        window.addEventListener('scroll', (event) => {
            if (isSidebarVisible) {
                window.scrollTo(0, prevScrollTop);
            }
        });
    })

});

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

— लोजाचेवस्काया अनास्तासिया
स्रोत

2

अफसोस की बात है कि ऊपर दिए गए किसी भी उत्तर ने मेरे मुद्दों को तय नहीं किया।

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

फिर मैंने जोड़ने की कोशिश की .modal-open{overflow:auto;}(जो कि ज्यादातर लोगों ने सिफारिश की थी)। यह वास्तव में मुद्दों को तय: मैं मोडल खोलने के बाद स्क्रॉल बार प्रकट होता है। हालाँकि, एक और दुष्प्रभाव सामने आता है, वह यह है कि "हेडर के नीचे की पृष्ठभूमि बाईं ओर थोड़ी बढ़ेगी, साथ ही मोड के पीछे एक और लंबी पट्टी"

सौभाग्य से, मैं जोड़ने के बाद {padding-right: 0 !important;}, सब कुछ पूरी तरह से तय हो गया है। हेडर और बॉडी बैकग्राउंड दोनों ही गतिमान नहीं थे और मोडल अभी भी स्क्रॉलबार रखता है।

आशा है कि यह उन लोगों की मदद कर सकता है जो अभी भी इस मुद्दे के साथ फंस गए हैं। सौभाग्य!

— बोकार्ड वांग
स्रोत

1

अधिकांश टुकड़े यहां हैं, लेकिन मुझे कोई जवाब नहीं दिखता है जो इसे सभी को एक साथ रखता है।

समस्या तीन गुना है।

(1) अंतर्निहित पृष्ठ की स्क्रॉल को रोकें

$('body').css('overflow', 'hidden')

(2) और स्क्रॉल बार को हटा दें

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3) मोडल खारिज होने पर साफ करें

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

यदि मोडल पूर्ण-स्क्रीन नहीं है, तो पूर्ण स्क्रीन ओवरले में .modal बाइंडिंग लागू करें।

— evoskuil
स्रोत

4

यह मोडल के भीतर स्क्रॉल करने से भी रोकता है।

— डेनियल

एक ही समस्या है। क्या आपको एक समाधान मिला? @ डैनियल

— एलेक्सियोवे

@Vay के क्रमबद्ध करें। इसे देखें: blog.christoffer.me/…

— Daniel

1

बूटस्ट्रैप 3 के लिए मेरा समाधान:

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

क्योंकि मेरे लिए केवल overflow: hiddenपर body.modal-openवर्ग मूल की वजह से बाईं ओर स्थानांतरण होने से रोक नहीं किया था margin-right: 15px।

— pierrea
स्रोत

1

मैंने इसे इस तरह से किया है ...

$('body').css('overflow', 'hidden');

लेकिन जब घुमक्कड़ गायब हो गया तो यह सब कुछ ठीक 20px चला गया, इसलिए मैंने जोड़ा

$('body').css('margin-right', '20px');

इसके बाद सीधे।

मेरे लिये कार्य करता है।

— चट्टान
स्रोत

यह केवल तभी काम करता है जब मोडल स्क्रीन के आकार से छोटा हो।

— सर्गेई

1

यदि मोडल 100% ऊंचाई / चौड़ाई के हैं, तो "माउसेंटर / लीव" स्क्रॉल को आसानी से सक्षम / अक्षम करने के लिए काम करेगा। यह वास्तव में मेरे लिए काम कर रहा है:

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});

— मैट
स्रोत

1

मेरे लिए काम किया

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});

— नमल
स्रोत

1

बुलमा ऐसा क्यों नहीं करती? जब मोडल सक्रिय होता है, तब html को उनकी कक्षा में जोड़ते हैं .is-clipped जो अतिप्रवाह होता है: छिपा हुआ - महत्वपूर्ण! और बस।

संपादित करें: ओके, बुल्मा में यह बग है, इसलिए आपको अन्य चीजों को भी जोड़ना चाहिए

html.is-modal-active {
  overflow: hidden !important;
  position: fixed;
  width: 100%; 
}

— nrkz
स्रोत

1

चूंकि मेरे लिए यह समस्या मुख्य रूप से आईओएस पर प्रस्तुत की गई थी, मैं केवल आईओएस पर इसे ठीक करने के लिए कोड प्रदान करता हूं:

  if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
    var $modalRep    = $('#modal-id'),
        startScrollY = null, 
        moveDiv;  

    $modalRep.on('touchmove', function(ev) {
      ev.preventDefault();
      moveDiv = startScrollY - ev.touches[0].clientY;
      startScrollY = ev.touches[0].clientY;
      var el = $(ev.target).parents('#div-that-scrolls');
      // #div-that-scrolls is a child of #modal-id
      el.scrollTop(el.scrollTop() + moveDiv);
    });

    $modalRep.on('touchstart', function(ev) {
      startScrollY = ev.touches[0].clientY;
    });
  }

— LowFieldTheory
स्रोत

1

उपरोक्त में से किसी भी उत्तर ने मेरे लिए पूरी तरह से काम नहीं किया। इसलिए मुझे एक और तरीका मिला जो अच्छी तरह से काम करता है।

बस एक जोड़ने के scroll.(namespace)श्रोता और सेट scrollTopकीdocument यह मूल्य के नवीनतम करने के लिए ...

और अपने करीबी स्क्रिप्ट में श्रोता को भी हटा दें।

// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {

  var documentScrollTop = $(document).scrollTop();
  $(document).on('scroll.noScroll', function() {
     $(document).scrollTop(documentScrollTop);
     return false;
  });

}).on('hidden.bs.modal', function() {

  $(document).off('scroll.noScroll');

});

अपडेट करें

लगता है, यह क्रोम पर अच्छा काम नहीं करता है। इसे ठीक करने के लिए कोई सुझाव?

— Pars
स्रोत

0

यह मेरे लिए काम किया:

$("#mymodal").mouseenter(function(){
   $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
   $("body").css("overflow", "visible");
});

— गेरहार्ड लिबेनबर्ग
स्रोत

0

उन लोगों के लिए जो बूटस्ट्रैप 3 मोडल के लिए स्क्रॉल ईवेंट प्राप्त करना चाहते हैं:

$(".modal").scroll(function() {
    console.log("scrolling!);
});

— Arie
स्रोत