अन्य डीओएम तत्व

Question

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

जब मैं स्क्रॉल करने योग्य div पर माउस कर्सर डालता हूं तो मैं इसे माउस व्हील से स्क्रॉल कर सकता हूं। लेकिन जब मैं कर्सर को ओवरलैपिंग ओवर पर ले जाता हूं तो माउस व्हील स्क्रॉल को रोकता है जो div (और यह सही व्यवहार है क्योंकि पूर्ण स्थानांतरित div divable div के अंदर नहीं है)।

प्रश्न: माउस व्हील घटनाओं के लिए इस पूर्ण स्थानांतरित div 'पारदर्शी' को बनाने के लिए इस अंतर्निहित स्क्रोल करने योग्य div को पूर्ण स्थानांतरित div द्वारा प्राप्त स्क्रॉल ईवेंट को पास या प्रेषित करने के लिए कैसे करें।

मैं इसे क्रोम में काम कर सकता हूं, लेकिन आईई और फ़ायरफ़ॉक्स में नहीं। आईई और फ़ायरफ़ॉक्स में काम करने के लिए इस कोड को फिर से लिखना कैसे है? http://jsfiddle.net/HAc4K/5

संपादित:

if ($.browser.webkit) {  
    $(".overlap-container").bind("mousewheel", function (e) { 

     var origEvent = e.originalEvent; 
     var evt = document.createEvent("WheelEvent"); 
     evt.initWebKitWheelEvent(
     origEvent.wheelDeltaX, 
     origEvent.wheelDeltaY, 
     window, 
     0, 
     0, 
     0, 
     0, 
     origEvent.ctrlKey, 
     origEvent.altKey, 
     origEvent.shiftKey, 
     origEvent.metaKey); 

     $(".scroll-container").get(0).dispatchEvent(evt); 
    }); 
} 

यहाँ उदाहरण देखें यह समस्या मूल रूप से jqGrid से है - स्थिर कॉलम माउस व्हील स्क्रॉल प्रतिक्रिया नहीं करते।

Chrome और Firefox भयानक सीएसएस संपत्ति में समर्थित है: pointer-events:none

Answer 1

jQuery के साथ एक ज्ञात समस्या की तरह लग रहा: OriginalEvent not supported in IE

Answer 2

संक्षिप्त उत्तर: यदि आप उपयोग इंटरनेट एक्सप्लोरर के मामले में the demo में initWheelEvent की गलत पैरामीटर का उपयोग । विधि में the documentation में वर्णित 16 पैरामीटर होना चाहिए। यो वर्तमान में केवल 11 पैरामीटर का उपयोग करते हैं, जिनमें initWebKitWheelEvent है, लेकिन initWheelEvent के सभी मानकों का अर्थ बिल्कुल दूसरा है। आपको initWheelEvent के पैरामीटर को ठीक करना होगा।

Answer 3

मुझे एहसास है कि यह वही नहीं है जो आप खोज रहे हैं, लेकिन कम से कम क्रोम, आई 7 +, और फ़ायरफ़ॉक्स 3.5+ में जो कुछ आप पूछते हैं - अंतर्निहित div को स्क्रॉल करते हैं जब div ओवरलेइंग इसे स्क्रॉल ईवेंट प्राप्त करता है:

http://jsfiddle.net/b9chris/yM3qs/

यह इतना बस कर रहा है क्योंकि ओवरलैपिंग div div यह overlaps का एक बच्चा है - कोई jQuery किसी भी माउसव्हील घटनाओं पर गुजर (हालांकि यह सुनिश्चित करने के लिए ओवरलैपिंग div रहता है जहां यह होने की जरूरत है स्क्रॉल करने के लिए सुन रहा है)।

हालांकि jqGrid में इस प्रकार के वर्कअराउंड को लागू करने के लिए कोड के उचित कोड को अपनाने की आवश्यकता हो सकती है।

HTML:

<div id=under> 
    (content goes here) 
    <div id=over></div> 
</div> 

सीएसएस:

#under { 
    position: absolute; 
    left: 0; top: 0; 
    width: 220px; height: 200px; 
    overflow-y: scroll; 
} 

#over { 
    position: absolute; 
    left: 1px; top: 100px; 
    width: 200px; height: 100px; 
    z-index: 2; 
} 

जे एस:

(function() { 
    $('#under').on('scroll', function() { 
     $('#over').css('top', $(this).scrollTop() + 100); 
    }); 
})(); 

Answer 4

उपयोग RetargetMouseScroll(overlap container, scroll container)।