बस स्क्रॉल स्क्रॉल करें इसे छिपाएँ नहीं?

Question

जब मैं लाइटबॉक्स का उपयोग कर रहा हूं, तो मैं माता-पिता के HTML / बॉडी स्क्रॉलबार को अक्षम करने का प्रयास कर रहा हूं। यहाँ मुख्य शब्द अक्षम है । मैं इसे छिपाना नहीं चाहता overflow: hidden;।

इसका कारण यह है कि overflow: hiddenसाइट को कूदता है और उस क्षेत्र को ऊपर ले जाता है जहां स्क्रॉल था।

मैं यह जानना चाहता हूं कि क्या यह दिखाते हुए भी स्क्रॉलबार को निष्क्रिय करना संभव है।

Comments

क्या कोई स्क्रॉलिंग संभव है? (क्या लाइटबॉक्स में कोई स्क्रॉलबार्स है?)

— asटाइम विद

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

— देजन।

स्क्रॉलबार के साथ लाइटबॉक्स का उपयोग करने में क्या समस्या है?

— मन्नी

@Dejan क्योंकि मुझे पता है कि सभी स्क्रॉलिंग को कैसे निष्क्रिय करना है - जो मुख्य स्क्रॉलबार को अक्षम करेगा, लेकिन लाइटबॉक्स में भी ...

— --ime Vidas

कृपया इस पोस्ट में उत्तर को संपादित न करें। नीचे उत्तर अनुभाग उत्तर के लिए है। यदि आपके पास आपके प्रश्न का उत्तर है जो नीचे दिए गए उत्तर से भिन्न है, तो आप उत्तर चयन में अपना समाधान जोड़ सकते हैं।

— इंट्रैक्टर

Answer 1

यदि ओवरलेयर के नीचे का पृष्ठ शीर्ष पर "निश्चित" हो सकता है, जब आप ओवरले को खोलते हैं तो आप सेट कर सकते हैं

body { position: fixed; overflow-y:scroll }

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

body { position: static; overflow-y:auto }

मैंने सिर्फ इस तरह से प्रस्तावित किया क्योंकि आपको किसी भी स्क्रॉल इवेंट को बदलने की आवश्यकता नहीं होगी

अपडेट करें

आप थोड़ा सुधार भी कर सकते हैं: यदि आप document.documentElement.scrollTopपरत खोलने से ठीक पहले जावास्क्रिप्ट के माध्यम से संपत्ति प्राप्त करते हैं, तो आप गतिशील रूप से उस मूल्य को topशरीर तत्व की संपत्ति के रूप में असाइन कर सकते हैं: इस दृष्टिकोण के साथ पृष्ठ अपनी जगह पर खड़ा रहेगा, भले ही आप ' शीर्ष पर या यदि आप पहले ही स्क्रॉल कर चुके हैं।

सीएसएस

.noscroll { position: fixed; overflow-y:scroll }

जे एस

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

Comments

यह मेरे लेआउट के साथ खिलवाड़ करता है लेकिन कुछ संशोधनों के साथ यह काम कर सकता है। मुझे यह पसंद है मैं इसे और अधिक

— आजमाऊंगा

थोड़ा संशोधन के साथ यह काम करता है। मैंने एक चौड़ाई जोड़ी: 100%; im मेरे प्रश्न को हल के साथ अपडेट करता है लेकिन आप चौड़ाई के साथ अपने को संशोधित कर सकते हैं: 100% ;? सुझाव के लिए धन्यवाद

— Dejan.S

मुझे पता नहीं क्यों, लेकिन यह मेरे लिए बेहतर काम करता है: $('body').css('top', -($('body').scrollTop()) + 'px').addClass('noscroll');

— PDXIII

@ सफेदे, तुम सही हो। मैंने फ़िडेल अपडेट किया है: jsfiddle.net/evpozdniakov/2m8km9wg धन्यवाद!

— evpozdniakov

एक समाधान के लिए टिप्पणियों को पढ़ने वालों के लिए, अंतिम फेल्ड दोनों मामलों में स्क्रॉलबार की स्थिति को बनाए रखते हुए स्क्रॉलबार को अक्षम करने और फिर से सक्षम करने के लिए एक समाधान प्रदान करता है। धन्यवाद!

— उपयोगकर्ता1063287

Answer 2

चयनित समाधान के लिए चार छोटे जोड़:

1. IE में डबल स्क्रॉल बार को रोकने के लिए शरीर के बजाय html में 'noscroll' लागू करें
2. यह देखने के लिए कि क्या वास्तव में 'noscroll' वर्ग जोड़ने से पहले एक स्क्रॉल बार है । अन्यथा, साइट नए गैर-स्क्रॉलिंग स्क्रॉल बार द्वारा धकेल दी जाएगी।
3. किसी भी संभावित स्क्रॉल को रखने के लिए पूरा पृष्ठ शीर्ष पर नहीं जाता (जैसे कि Fabrizio का अपडेट, लेकिन आपको 'noscroll' वर्ग जोड़ने से पहले मान को हथियाने की आवश्यकता है)
4. सभी ब्राउज़र स्क्रॉल नहीं करते हैं उसी तरह से देखें जैसे http://help.dottoro.com/ljnvjiow.php पर प्रलेखित

पूर्ण समाधान जो अधिकांश ब्राउज़रों के लिए काम करता है:

सीएसएस

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

स्क्रॉल अक्षम करें

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

स्क्रॉल सक्षम करें

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

डबल ट्रैक बार के समाधान के लिए मुझे सही रास्ते पर और ब्रडिंगो के लिए फेब्रिज़ियो और देजान के लिए धन्यवाद

Comments

यह डेस्कटॉप पर अच्छी तरह से परीक्षण किया गया था, लेकिन iPhone पर यह एक रिक्त सफेद स्क्रीन बनाया गया जब तक कि पाठक ने पृष्ठ को स्क्रॉल करने का प्रयास नहीं किया। एक बार पाठक ने पृष्ठ के साथ बातचीत करने की कोशिश की, तो इच्छित स्क्रीन स्क्रॉल लॉक के साथ दिखाई देने लगी।

— माइकल खलीली

यह पूरी तरह से iPad पर फोनबॉक्स afterLoad()और afterCloseकॉलबैक के साथ लाइटबॉक्स छवि की स्क्रॉलिंग को अक्षम करने के लिए काम करता है । इस प्रश्न को खोजने वाले अन्य लोगों के लिए उपयोगी हो सकता है।

— टोमेनो

"स्क्रॉल सक्षम करें" भाग में, आप "स्क्रॉल को अक्षम करने" के लिए कॉल के बाद html तत्व पर रखी गई शैली विशेषता को हटाना चाह सकते हैं; क्या तुम नहीं?

— बेन

jQuery के देशी डोम की scrollTopतरह मानकीकृत है कि 'स्क्रॉल स्क्रॉल' कोड की पंक्ति 2 को व्यक्त किया जा सकता है $( window ).scrollTop()।

— बार्नी

मुझे लगता है कि इसमें एक और बात जोड़ने की जरूरत है। OSX में क्रोम पर, ब्राउज़र के लिए "ओवर-स्क्रॉल" करना संभव है, जिससे एक लोचदार फीलिंग स्क्रॉल होती है। इस कोड के साथ यदि आप पृष्ठ के ऊपर या नीचे के ग्रे क्षेत्र में हैं और आप उस स्थान पर होवर करते हैं जहां आप स्क्रॉल करना अक्षम करते हैं। यह ब्राउज़र विंडो के ऊपर / नीचे एक स्थान पर चिपकेगा। इस कारण से आपको एक नकारात्मक स्क्रॉल मान के लिए चेक जोड़ने की आवश्यकता है if (scrollTop < 0) { scrollTop = 0; }:। यहाँ अक्षम gist.github.com/jayd3e/2eefbbc571cd1666444bb के लिए पूर्ण कोड है ।

— JayD3e

Answer 3

JQuery के साथ सम्मिलित:

---

अक्षम

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

सक्षम

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

प्रयोग

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

Comments

यह मेरे लिए एकदम सही था, पिछले उत्तर ने मेरे पृष्ठ को उछाल दिया, यह नहीं है

— बोगदान तोमी

खुशी है कि मैं मदद कर सकता है, तो आप भी मोबाइल उपकरणों के लिए "touchmove" के लिए जाँच करने के लिए, आवश्यकता हो सकती है, चियर्स

— Ceed

खैर, यह लगभग मेरे लिए काम किया। इसने विंडोज (फ़ायरफ़ॉक्स, क्रोम) और फ़ायरफ़ॉक्स में मैकओएस पर अद्भुत काम किया ... लेकिन फिर मैं क्रोम और सफारी में मैकओएस के साथ विंडोज आईई और एज में चला गया। समस्या अब साइड-पेज से कूदने वाले पेज के बारे में नहीं थी, लेकिन स्क्रॉलबार ऊपर से वर्तमान स्थिति में जा रहा था या पेज ऊपर की ओर टिमटिमा रहा था। यार, ये तो था , इतना करीब। शायद हम अभी भी इसे काम कर सकते हैं।

— स्टीवन वेंटिमिग्लिया

यह मेरे लिए पूरी तरह से काम किया, धन्यवाद! एक वेबसाइट पर आदर्श ट्यू उपयोग जहां ओवरले मेनू पृष्ठ के निचले भाग में भी है!

— सूर्योलीजफ

Answer 4

मैं ओपी हूं

Fcalderan से जवाब की मदद से मैं एक समाधान बनाने में सक्षम था। मैं अपना समाधान यहां छोड़ता हूं क्योंकि यह स्पष्टता लाता है कि इसका उपयोग कैसे करना है, और एक बहुत ही महत्वपूर्ण विवरण जोड़ता है,width: 100%;

मैं इस वर्ग को जोड़ता हूं

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

यह मेरे लिए काम करता था और मैं फैंकीप का उपयोग कर रहा था।

Answer 5

यह वास्तव में मेरे लिए अच्छा काम किया ...।

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

जब भी आप स्क्रॉलिंग को लॉक करने जा रहे हों तो कोड की उन दो पंक्तियों को लपेट लें।

जैसे

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

Comments

यह उन सभी में से सबसे अच्छा जवाब है

— जाफो

Answer 6

आप स्क्रॉल ईवेंट को अक्षम नहीं कर सकते, लेकिन आप संबंधित क्रियाओं को अक्षम कर सकते हैं जो स्क्रॉल तक ले जाती हैं, जैसे कि मूसव्हील और टचमोव:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

Answer 7

आप overflow: hiddenएक ही समय में बॉडी के स्क्रॉलबार को छिपा सकते हैं और एक मार्जिन सेट कर सकते हैं ताकि सामग्री कूद न जाए:

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

और फिर आप अंतराल में भरने के लिए पेज पर एक अक्षम स्क्रॉलबार जोड़ सकते हैं:

textarea {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 11px;
  outline: none;
  resize: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

<textarea></textarea>

मैंने अपने लाइटबॉक्स कार्यान्वयन के लिए बिल्कुल यही किया। लगता है अब तक अच्छा काम कर रहा था।

Comments

मुझे वास्तव में यह तरीका सबसे अच्छा लगता है। बहुत सरल और महान काम करता है। धन्यवाद!

— dericcain

Answer 8

यह वह समाधान है जिसके साथ हम गए थे। जब ओवरले को खोला जाता है, तो स्क्रॉल स्थिति को सहेज लें, उपयोगकर्ता द्वारा पृष्ठ को स्क्रॉल करने का प्रयास करने पर किसी भी समय सहेजे गए स्थान पर वापस स्क्रॉल करें, और ओवरले बंद होने पर श्रोता को बंद कर दें।

यह IE पर थोड़ा उछल रहा है, लेकिन फ़ायरफ़ॉक्स / क्रोम पर एक आकर्षण की तरह काम करता है।

var body = $("body"),
  overlay = $("#overlay"),
  overlayShown = false,
  overlayScrollListener = null,
  overlaySavedScrollTop = 0,
  overlaySavedScrollLeft = 0;

function showOverlay() {
  overlayShown = true;

  // Show overlay
  overlay.addClass("overlay-shown");

  // Save scroll position
  overlaySavedScrollTop = body.scrollTop();
  overlaySavedScrollLeft = body.scrollLeft();

  // Listen for scroll event
  overlayScrollListener = body.scroll(function() {
    // Scroll back to saved position
    body.scrollTop(overlaySavedScrollTop);
    body.scrollLeft(overlaySavedScrollLeft);
  });
}

function hideOverlay() {
  overlayShown = false;

  // Hide overlay
  overlay.removeClass("overlay-shown");

  // Turn scroll listener off
  if (overlayScrollListener) {
    overlayScrollListener.off();
    overlayScrollListener = null;
  }
}

// Click toggles overlay
$(window).click(function() {
  if (!overlayShown) {
    showOverlay();
  } else {
    hideOverlay();
  }
});

/* Required */
html, body { margin: 0; padding: 0; height: 100%; background: #fff; }
html { overflow: hidden; }
body { overflow-y: scroll; }

/* Just for looks */
.spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); }
.overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; }
.overlay .spacer { background: linear-gradient(#88f, #0ff); }
.overlay-shown { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Top of page</h1>
<p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p>
<div class="spacer"></div>
<h1>Bottom of page</h1>
<div id="overlay" class="overlay">
  <h1>Top of overlay</h1>
  <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p>
  <div class="spacer"></div>
  <h1>Bottom of overlay</h1>
</div>

Comments

वास्तव में काम करता है, लेकिन एक निश्चित हेडर के मामले में डिजाइन को दागदार करता है, क्योंकि स्क्रॉलबार इसके तहत गोता लगाता है।

— लियोन विलेंस

@LeonWillens मुझे यकीन नहीं है कि आपका क्या मतलब है। आप ओवरले एक निश्चित शीर्षक के अंतर्गत प्रदर्शित होने के बारे में चिंतित हैं, तो आप को समायोजित करने की आवश्यकता होगी z-indexकी .overlay-shownतय हैडर से अधिक होना। (मेरे पास यह कोड एक निश्चित हेडर के साथ एक साइट पर उत्पादन में चल रहा है और यह ठीक काम करता है।)

— 0b10011

नहीं, मैं bodyटैग के स्क्रॉलबार के बारे में बात कर रहा था । मैंने कल आपके कोड के साथ प्रयोग किया और मेरे पृष्ठ के शीर्ष पर एक निश्चित हेडर है। यदि मैं bodyटैग के माध्यम से स्क्रॉलिंग को हैंडल करता हूं , तो स्क्रॉलबार निश्चित हेडर के नीचे होगा।

— लियोन विलेंस

@ LeWillens उफ़, लगता है जैसे मैंने कुछ बिंदु पर उत्पादन में इसे ठीक किया और इसे अपडेट करना भूल गया। इसके बजाय ऐसा लगता है $("body"), हम उपयोग कर रहे हैं $(window)। और z-index: -1इसे छिपाने के लिए ओवरले के बजाय , आप उपयोग visibility: hiddenया समान कर सकते हैं । एक त्वरित परीक्षण के लिए jsfiddle.net/8p2gfeha देखें कि क्या यह काम करता है। स्क्रॉलर के शीर्ष पर फिक्स्ड हेडर अब दिखाई नहीं देता है। मैं अंततः इन परिवर्तनों को उत्तर में शामिल करने का प्रयास करूँगा।

— 0b10011

एक जादू की तरह काम करता है! धन्यवाद :)

— लियोन विलेंस

Answer 9

मेरे पास एक समान समस्या थी: बाएं हाथ का मेनू, जब यह दिखाई देता है, तो स्क्रॉल करने से रोकता है। जैसे ही ऊंचाई 100vh पर सेट की गई, स्क्रॉलबार गायब हो गया और सामग्री दाईं ओर जा गिरी।

इसलिए यदि आप स्क्रॉलबार को सक्षम रखने में कोई आपत्ति नहीं करते हैं (लेकिन विंडो को पूरी ऊंचाई पर सेट करना है तो यह वास्तव में कहीं भी स्क्रॉल नहीं करेगा) तो एक और संभावना एक छोटे से नीचे मार्जिन सेट कर रही है, जो स्क्रॉल बार को दिखाती रहेगी:

body {
    height: 100vh;
    overflow: hidden;
    margin: 0 0 1px;
}

Comments

overflow:hiddenमार्जिन को किसी भी प्रभाव से रोकता नहीं है?

— कोजा

Answer 10

आप अतिप्रवाह रख सकते हैं: छिपा हुआ है, लेकिन स्क्रॉल स्थिति को मैन्युअल रूप से प्रबंधित करें:

दिखाने से पहले वास्तविक स्क्रॉल स्थिति का पता लगाएँ:

var scroll = [$(document).scrollTop(),$(document).scrollLeft()];
//show your lightbox and then reapply scroll position
$(document).scrollTop(scroll[0]).scrollLeft(scroll[1]);

यह काम करना चाहिए

Answer 11

क्रूड लेकिन काम करने का तरीका स्क्रॉल को वापस ऊपर करने के लिए मजबूर करना होगा, इस प्रकार प्रभावी रूप से स्क्रॉलिंग को अक्षम करना:

var _stopScroll = false;
window.onload = function(event) {
    document.onscroll = function(ev) {
        if (_stopScroll) {
            document.body.scrollTop = "0px";
        }
    }
};

जब आप लाइटबॉक्स खोलते हैं तो ध्वज को ऊपर उठाएं और इसे बंद करते समय, ध्वज को नीचे करें।

लाइव परीक्षण का मामला ।

Answer 12

मैं "अतिप्रवाह: छिपी" विधि से चिपकना पसंद करता हूं और सिर्फ पैडिंग-राइट जोड़ता हूं जो स्क्रॉलबार की चौड़ाई के बराबर है।

खोए हुए स्रोत से स्क्रॉलबार चौड़ाई फ़ंक्शन प्राप्त करें ।

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

ओवरले दिखाते समय, html में "noscroll" क्लास जोड़ें और बॉडी में पैडिंग-राइट जोड़ें:

$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");

छुपाते समय, क्लास को हटाकर पैडिंग करें:

$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);

Noscroll शैली सिर्फ यह है:

.noscroll { overflow: hidden; }

ध्यान दें कि यदि आपके पास कोई भी तत्व है: तो आपको उन तत्वों में भी पैडिंग जोड़ने की जरूरत है।

Comments

मैंने इस समाधान का उपयोग किया। इसने मुझे डबल स्क्रॉलबार (शरीर के लिए एक 'रिक्त' और ओवरले की सामग्री के लिए दूसरा एक) से बचने में मदद की। यह OSX पर भी बहुत अच्छी तरह से काम करता है जो स्क्रॉलबार को बिल्कुल नहीं दिखा सकता है।

— Novazembla

Answer 13

<div id="lightbox"><body>तत्व के अंदर है , इस प्रकार जब आप लाइटबॉक्स को स्क्रॉल करते हैं तो आप शरीर को भी स्क्रॉल करते हैं। इसका समाधान यह है कि <body>तत्व को 100% से अधिक नहीं बढ़ाया जाए , ताकि लंबे divतत्व को दूसरे तत्व के अंदर रखा जा सके और इस divतत्व के साथ यदि आवश्यक हो तो स्क्रॉलबार को जोड़ा जा सके overflow: auto।

html {
  height: 100%
}
body {
  margin: 0;
  height: 100%
}
#content {
  height: 100%;
  overflow: auto;
}
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<html>
  <body>
    <div id="content">much content</div>
    <div id="lightbox">lightbox<div>
  </body>
</html>

अब, लाइटबॉक्स (और bodyसाथ ही) पर स्क्रॉल करने से कोई प्रभाव नहीं पड़ता है, क्योंकि शरीर अब स्क्रीन की ऊंचाई के 100% से अधिक नहीं है।

Answer 14

HTML टैग या बॉडी टैग पर मोडल / लाइटबॉक्स प्रदर्शित करते समय सभी मोडल / लाइटबॉक्स जावास्क्रिप्ट-आधारित सिस्टम एक अतिप्रवाह का उपयोग करते हैं।

जब लाइटबॉक्स शो होता है, तो js html या बॉडी टैग पर छिपे हुए एक अतिप्रवाह को धक्का देते हैं। जब लाइटबॉक्स छिपा होता है, तो छिपे हुए अन्य को html या बॉडी टैग पर एक ओवरफ्लो ऑटो को हटा दिया जाता है।

मैक पर काम करने वाले डेवलपर्स, स्क्रॉलबार की समस्या नहीं देखते हैं।

स्क्रोलबार को हटाने के मोडल के नीचे फिसलने वाली सामग्री को न देखने के लिए बस एक अप्रयुक्त द्वारा छिपे हुए को बदलें।

लाइटबॉक्स खुला / शो:

<html style="overflow: unset;"></html>

लाइटबॉक्स बंद / छुपाएँ:

<html style="overflow: auto;"></html>

Answer 15

यदि ओवरलेयर के नीचे का पृष्ठ शीर्ष पर "निश्चित" हो सकता है, जब आप ओवरले को खोलते हैं तो आप सेट कर सकते हैं

.disableScroll { position: fixed; overflow-y:scroll }

स्क्रॉल करने योग्य निकाय को यह वर्ग प्रदान करें, फिर भी आपको सही स्क्रॉलबार देखना चाहिए लेकिन सामग्री स्क्रॉल योग्य नहीं है।

पेज की स्थिति को बनाए रखने के लिए इसे jquery में करें

$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');

जब आप ओवरले को बंद कर देते हैं तो इन गुणों को वापस कर दें

var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));

मैंने सिर्फ इस तरह से प्रस्तावित किया क्योंकि आपको किसी भी स्क्रॉल इवेंट को बदलने की आवश्यकता नहीं होगी

Answer 16

यह स्क्रॉल स्थिति को सहेजकर और स्क्रॉलिंग को सक्षम करने पर इसे पुनर्स्थापित करके व्यूपोर्ट को ऊपर तक कूदना बंद कर देगा।

सीएसएस

.no-scroll{
  position: fixed; 
  width:100%;
  min-height:100vh;
  top:0;
  left:0;
  overflow-y:scroll!important;
}

जे एस

var scrollTopPostion = 0;

function scroll_pause(){
  scrollTopPostion = $(window).scrollTop();
  $("body").addClass("no-scroll").css({"top":-1*scrollTopPostion+"px"});
}

function scroll_resume(){
  $("body").removeClass("no-scroll").removeAttr("style");
  $(window).scrollTop(scrollTopPostion);
}

अब आपको बस इतना करना है कि फ़ंक्शन को कॉल करना है

$(document).on("click","#DISABLEelementID",function(){
   scroll_pause();
});

$(document).on("click","#ENABLEelementID",function(){
   scroll_resume();
});

Answer 17

आप इसे जावास्क्रिप्ट के साथ कर सकते हैं:

// Classic JS
window.onscroll = function(ev) {
  ev.preventDefault();
}

// jQuery
$(window).scroll(function(ev) {
  ev.preventDefault();
}

और फिर इसे तब अक्षम करें जब आपका लाइटबॉक्स बंद हो।

लेकिन अगर आपके लाइटबॉक्स में एक स्क्रॉल बार है, तो आप इसे खोलते समय स्क्रॉल नहीं कर पाएंगे। इसका कारण यह है है windowशामिल दोनों bodyऔर #lightbox। तो आपको निम्नलिखित की तरह एक वास्तुकला का उपयोग करना होगा:

<body>
  <div id="global"></div>
  <div id="lightbox"></div>
</body>

और उसके बाद onscrollही घटना को लागू करें #global।