स्क्रॉल ईवेंट को कॉल करने से स्क्रॉलटॉप को रोकें

Question

मैं इस व्यवहार को बनाने की कोशिश कर रहा हूं: जब उपयोगकर्ता एक मूसहेल स्क्रॉल करता है (या ↓ दबाता है) वेबपृष्ठ विंडो की ऊंचाई से नीचे स्क्रॉल किया जाता है।

मैं निम्नलिखित कोड के साथ समाप्त हो गया है:

var newScrollTop, 
    oldScrollTop = $(window).scrollTop(), 
    preventScroll = false; 
$(window).scroll(function() { 
    if (!preventScroll) { 
     preventScroll = true; 
     newScrollTop = $(this).scrollTop(); 
     if (newScrollTop > oldScrollTop) { 
      $(this).scrollTop(oldScrollTop + $(window).height()); 
     } 
     else { 
      $(this).scrollTop(oldScrollTop - $(window).height()); 
     } 
     oldScrollTop = newScrollTop; 
     preventScroll = false; 
    } 
}); 

लेकिन जैसा कि मैंने यह उम्मीद यह काम नहीं करता: पुस्तक घटना पृष्ठ पर बहुत धार (नीचे या ऊपर) के लिए स्क्रॉल किया गया है। मैं क्या खो रहा हूँ?

Answer 1

डिफ़ॉल्ट ब्राउज़र स्क्रॉल कार्यक्षमता को ओवरराइड करने का कोई आसान तरीका नहीं है। यहाँ आप क्या चाहते करने का एक ही रास्ता है, लेकिन यह ब्रैंडन हारून के jquery-mousewheel plugin माउस स्क्रॉलव्हील का प्रबंधन करने की आवश्यकता है:

$(function() { 
    // Ugly hack to disable browser scrolling (downside: hides scrollbar!!!) 
    $('html').css('overflow', 'hidden'); 

    // Get viewport height by which to scroll (up or down) 
    var viewportHeight = $(window).height(); 

    // Recache viewport height on browser resize 
    $(window).on('resize', function() { 
     viewportHeight = $(window).height(); 
    }); 

    // Scroll on mousewheel 
    $('html').on('mousewheel', function(event, delta, deltaX, deltaY) { 
     // scroll down 
     if (deltaY < 0) 
      window.scrollBy(0, viewportHeight); 
     // scroll up 
     else 
      window.scrollBy(0, -viewportHeight); 
    }); 

    // Disable document keypress event 
    // which would scroll the content even with "overlow: hidden" 
    $(document).on('keypress', function(){ 
     return false; 
    }); 

    // Scroll on arrow up/down keys 
    $(document).on('keydown', function(event){ 
     // arrow down key 
     if (event.which == 40) 
      window.scrollBy(0, viewportHeight); 
     // arrow up key 
     if (event.which == 38) 
      window.scrollBy(0, -viewportHeight); 
    }); 
}); 

यहाँ एक fiddle कोड डेमो के लिए है। यह सब बहुत अच्छी तरह से काम करता है सिवाय इसके कि मेरे समाधान में एक बदसूरत कमी है। $('html').css('overflow', 'hidden'); ब्राउज़र स्क्रॉलबार को हटा रहा है।

Answer 2

समस्या यह है कि आप scrollTop() का उपयोग कर रहे हैं जो विंडो स्क्रॉल ईवेंट के अंदर एक स्क्रॉल ईवेंट ट्रिगर करता है।

तो बुनियादी तौर पर, कोड आपके द्वारा लिखी गई साथ आप एक अनंत लूप में क्योंकि जैसे ही पहली पुस्तक घटना एक और एक scrollTop() से शुरू हो रहा है, जबकि अपने preventScroll चर अभी भी गलत पर सेट नहीं है और इतने पर शुरू हो रहा है के रूप में चलाते हैं।

अपने कोड काम करने के लिए तुम इतनी तरह setTimeout सुविधा अंदर false करने के लिए अपने preventScroll चर सेट करना होगा:

var newScrollTop, 
    oldScrollTop = $(window).scrollTop(), 
    preventScroll = false; 

$(window).scroll(function() { 
    if (!preventScroll) { 
     preventScroll = true; 
     newScrollTop = $(this).scrollTop(); 
     if (newScrollTop > oldScrollTop) { 
      $(this).scrollTop(oldScrollTop + $(window).height()); 
     } 
     else { 
      $(this).scrollTop(oldScrollTop - $(window).height()); 
     } 
     oldScrollTop = newScrollTop; 

     setTimeout(function(){ preventScroll = false; }, 0); 
    } 
}); 

हम कुछ "देरी" जोड़ने से पहले हम false को preventScroll निर्धारित किया है। इस तरह जब आप scrollTop()preventScroll चर कहते हैं तो भी सत्य पर सेट हो जाएगा!

यहाँ एक काम बेला है: http://jsfiddle.net/J6Fcm/ (मैं एक छोटा सा अपना कोड संशोधित किया अपेक्षा के अनुरूप स्क्रॉल चरणों से काम करने देने के लिए)