बाहरी तत्वों में स्क्रॉलिंग को अक्षम कैसे करें?

Question

मेरे पास एक पृष्ठ के भीतर लंबवत-स्क्रॉलिंग div है जो लंबवत स्क्रॉल भी करता है।

जब बच्चे div को माउस व्हील के साथ स्क्रॉल किया जाता है और स्क्रॉल बार के ऊपर या नीचे तक पहुंच जाता है, तो पृष्ठ (बॉडी) स्क्रॉल करना शुरू कर देता है। जबकि माउस बच्चे div पर है, मैं पेज (बॉडी) स्क्रॉल लॉक होना चाहता हूं।

This SO post (scroll down to the selected answer) समस्या को अच्छी तरह से प्रदर्शित करता है।

This SO question अनिवार्य रूप से मेरा जैसा ही है, लेकिन चयनित उत्तर मेरी पृष्ठ सामग्री को क्षैतिज रूप से स्थानांतरित करने का कारण बनता है क्योंकि स्क्रॉलबार गायब हो जाता है और फिर से दिखाई देता है।

मैंने सोचा कि ऐसा कोई समाधान हो सकता है जो ईवेंट लेता है। स्टॉपप्रॉपैगेशन(), लेकिन काम करने के लिए कुछ भी नहीं मिला। एक्शनस्क्रिप्ट में, इस प्रकार की चीज को बच्चे के डिवीजन पर एक मूसहेल हैंडलर लगाकर हल किया जाएगा जो शरीर के तत्व तक पहुंचने से पहले घटना पर स्टॉपप्रॉपैगेशन() को कॉल करता है। चूंकि जेएस और एएस दोनों ईसीएमएस्क्रिप्ट भाषाएं हैं, मैंने सोचा कि अवधारणा का अनुवाद हो सकता है, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा था।

वहाँ एक समाधान है कि चारों ओर स्थानांतरण से मेरा पेज सामग्री रहता है? सीएसएस फिक्स के बजाए स्टॉपप्रॉपैगेशन का उपयोग करने की अधिक संभावना है? शुद्ध जेएस के रूप में JQuery उत्तरों का स्वागत है।

Answer 1

यहाँ क्या मैं के साथ समाप्त हो गया है। @ mrtsherman के उत्तर here के समान ही, jQuery की बजाय केवल शुद्ध जेएस घटनाएं। हालांकि, मैंने अभी भी बच्चे के div को चुनने और स्थानांतरित करने के लिए jQuery का उपयोग किया है।

// earlier, i have code that references my child div, as childDiv 

function disableWindowScroll() { 
    if (window.addEventListener) { 
     window.addEventListener("DOMMouseScroll", onChildMouseWheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = onChildMouseWheel; 
} 

function enableWindowScroll() { 
    if (window.removeEventListener) { 
     window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = null; 
} 

function onChildMouseWheel (event) { 
    var scrollTgt = 0; 
    event = window.event || event; 
    if (event.detail) { 
     scrollTgt = -40 * event.detail; 
    } else { 
     scrollTgt = event.wheelDeltaY; 
    } 

    if (scrollTgt) { 
     preventDefault(event); 
     $(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt); 
    } 
} 

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

मैंने देखा है स्क्रॉल बिल्कुल सामान्य स्क्रॉल से मेल नहीं खाता; ऐसा लगता है कि इस कोड के बिना थोड़ा तेज स्क्रॉल करना प्रतीत होता है। मुझे लगता है कि मैं व्हील डेलटाई को थोड़ा सा खटखटाकर ठीक कर सकता हूं, लेकिन यह अजीब बात है कि इसे ब्राउज़र द्वारा वास्तव में कार्यान्वित करने की तुलना में जावास्क्रिप्ट द्वारा अलग-अलग रिपोर्ट किया जाएगा ...

Answer 2

क्या इस बारे में:

div.onmousemove = function() { // may be onmouseover also works fine 
    document.body.style.overflow = "hidden"; 
    document.documentElement.style.overflow = "hidden"; 
}; 

div.onmouseout = function() { 
    document.body.style.overflow = "auto"; 
    document.documentElement.style.overflow = "auto"; 
}; 

Answer 3

मैं आमतौर पर स्क्रॉल इवेंट को सुनकर एक छोटे से हैक के साथ करता हूं दस्तावेज़ पर: यह रीसेट करता स्क्रॉल ऊंचाई वापस मूल एक के लिए - प्रभावी रूप से स्क्रॉल से दस्तावेज़ लेकिन अतिप्रवाह के साथ किसी भी आंतरिक तत्व ठंड: ऑटो अभी भी अच्छी तरह से स्क्रॉल करेगा:

var scrollTop = $(document).scrollTop(); 
$(document).on('scroll.scrollLock', function() { 
    $(document).scrollTop(scrollTop); 
}); 

और फिर जब मैं पूरा कर लेने आंतरिक स्क्रॉल लॉक:

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

.scrollLock इवेंट नेमस्पेस सुनिश्चित करता है कि मैं स्क्रॉल पर किसी भी अन्य ईवेंट श्रोताओं के साथ गड़बड़ नहीं कर रहा हूं।

Answer 4

हालांकि यह एक पुराने सवाल है, यहाँ मैं इसे कैसे jQuery के साथ क्या है। यह आपको बाहरी सूची में एक सूची स्क्रॉल करने की अनुमति देता है, या ओपी से पूछे जाने के लिए आप बाहरी सूची को दस्तावेज़ में बदल सकते हैं।

window.scrollLockHolder = null; 
function lockScroll(id){ 
    if (window.scrollLockHolder == null){ 
     window.scrollLockHolder = $('#' + id).scrollTop(); 
    } 
    $('#' + id).on('scroll', function(){ 
     $('#' + id).scrollTop(window.scrollLockHolder); 
    }); 
} 
function unlockScroll(id){ 
    $('#' + id).off('scroll'); 
    window.scrollLockHolder = null; 
} 

और तुम इस तरह इसका इस्तेमाल कर सकते हैं:

<ul onmousemove="lockScroll('outer-scroller-id')" onmouseout="unlockScroll('outer-scroller-id')"> 
    <li>...</li> 
    <li>...</li> 
</ul>