2013-11-01 5 views
6

को मैं एक संक्रमण वेबसाइट पर काम कर रहा हूँ स्क्रॉल करने के लिए, और जब मैं संक्रमण सर्जक के रूप में उपयोगकर्ता के लिए स्क्रॉल प्रयास उपयोग करना चाहते हैं, मैं नहीं चाहता कि वहाँ रहना चाहता हूँ एक खिड़की स्क्रॉल बार।JQuery/जे एस: का पता लगाने को उपयोगकर्ता के किसी भी विंडो अतिप्रवाह बिना स्क्रॉल प्रयास

अभी, मैं बस का पता लगाने कर रहा हूँ कि उपयोगकर्ता स्क्रॉल (मैं अपने विंडो का आकार बनाया है 1px लम्बे कि एक स्क्रॉलबार के लिए उपयोगकर्ताओं की स्क्रीन है, हालांकि यह है कि मैं क्या से बचने के लिए कोशिश कर रहा हूँ है) jQuery के

साथ
.scroll(function) 

विधि, और मेरे पेज संक्रमण के लिए कि का उपयोग करते हुए, लेकिन मैं एक पिक्सेल मेरा पेज अतिप्रवाह बनाने के लिए हो रही है, और इस तरह स्क्रॉलबार बिना दिखाए उपयोगकर्ता की पुस्तक प्रयास का पता लगाने के लिए करना चाहते

कैसे कर सकता है यह सामाप्त करो?

गन्दा पैच संभावना है कि मैं के बारे में पता:

पोजिशनिंग एक बाहरी आवरण के अंदर खिड़की और आवरण के अतिप्रवाह में स्क्रॉलबार छिपा। यह एक पैच अप नौकरी है और समाधान नहीं है। इसके परिणामस्वरूप पेज सामग्री ऑफ-सेंटर होती है क्योंकि सभी ब्राउज़र उनके स्क्रॉलबार के लिए समान चौड़ाई का उपयोग नहीं करते हैं।

उत्तर

19

इस question पर एक नज़र डालें। मैंने इसे fiddle बनाने के संदर्भ के रूप में उपयोग किया।

Works only in Firefox:

$('html').on ('DOMMouseScroll', function (e) { 
    var delta = e.originalEvent.detail; 

    if (delta < 0) { 
     $('p').text ('You scrolled up'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled down'); 
    } 

}); 

Works in Chrome, IE, Opera and Safari:

$('html').on ('mousewheel', function (e) { 
    var delta = e.originalEvent.wheelDelta; 

    if (delta < 0) { 
     $('p').text ('You scrolled down'); 
    } else if (delta > 0) { 
     $('p').text ('You scrolled up'); 
    } 
}); 

आपको कोई ऐसा तत्व है कि अपने पूरे ब्राउज़र स्क्रीन तक फैला पर बाध्य करने के लिए होगा।

+0

पर निर्भर करता है परीक्षण यह पता^_^BRB –

+0

जादू की तरह! उत्तम –

10

TreeTree से जवाब एक समारोह है कि सभी ब्राउज़रों का समर्थन करता है में सरल किया जा सकता। jQuery supports one or more event parameter(s) के बाद से mousewheel और DOMMouseScroll घटनाओं को मिलाएं। हालांकि, मेरा परीक्षण दिखाया गया है() नवीनतम फ़ायरफ़ॉक्स में काम नहीं करता है। इसके बजाए बांधें() का प्रयोग करें। तुम भी सभी ब्राउज़रों का समर्थन करने के वर डेल्टा घोषणा गठजोड़ कर सकते हैं:

$('html').bind('mousewheel DOMMouseScroll', function (e) { 
    var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail); 

    if (delta < 0) { 
     console.log('You scrolled down'); 
    } else if (delta > 0) { 
     console.log('You scrolled up'); 
    } 
}); 
0

आधुनिक समाधान wheel घटना (IE9 +)

$('selector').on('wheel', function(event) { 
    var delta = { 
    x: event.originalEvent.deltaX, 
    y: event.originalEvent.deltaY 
    }; 

    if (delta.x != 0 || delta.y != 0) { 
    //user scrolled 
    } 
}); 
संबंधित मुद्दे