स्क्रीन के शीर्ष या निचले किनारे पर कर्सर होने पर किसी पृष्ठ को स्क्रॉल करने के लिए JQuery/जावास्क्रिप्ट का उपयोग कैसे करें?

Question

सरल, मैं सिर्फ यह है करने के लिए तो जब कोई उपयोगकर्ता एक आइटम खींच रहा है चाहते हैं और वे बहुत नीचे या व्यूपोर्ट (10px या तो), पेज (लगभग 3000px लंबे) के शीर्ष तक पहुंचने धीरे स्क्रॉल नीचे या ऊपर, जब तक वे अपने कर्सर (और इस प्रकार आइटम को खींचा जा रहा है) क्षेत्र से बाहर ले जाएं।

एक आइटम एक ली टैग है जो सूची आइटम को खींचने योग्य बनाने के लिए jquery का उपयोग करता है। विशिष्ट होना करने के लिए:

• ../jquery-ui-1.8.14.custom.min.js
• http://code.jquery.com/jquery-1.6.2.min.js

मैं वर्तमान में window.scrollBy का उपयोग (x = 0, y = 3) पेज स्क्रॉल और के चर के लिए:

1. e.pageY ... प्रदान करता है पेज (स्क्रीन के सापेक्ष नहीं)
2. $ .scrollTop() पर कर्सर की पूर्ण वाई निर्देशांक ... प्रदान करता है offse पृष्ठ के शीर्ष से (जब स्क्रॉल बार सभी तरह से ऊपर है, यह 0 है)
3. $ .height() ... उपयोगकर्ता के ब्राउज़र/व्यूपोर्ट
4. body.offsetHeight में देखने योग्य क्षेत्र की ऊंचाई प्रदान करता है .. पूरे पृष्ठ की ऊंचाई

मैं इसे कैसे प्राप्त कर सकता हूं और कौन सा ईवेंट इसे सबसे अच्छा समायोजित करता है (वर्तमान में यह माउसओवर में)? मेरे विचार:

1. उपयोग करता है, तो/किसी और अगर यह शीर्ष क्षेत्र या निचले हिस्से पर है की जाँच करने के लिए एक एक, ऊपर स्क्रॉल अगर e.pageY, यह शीर्ष पर है दिखाया जा रहा है नीचे अगर e.page & तल में है , और फिर $ ('li') को कॉल करने के लिए। माउसओवर() ईवेंट को फिर से शुरू करने के लिए ...
   2. लूप के दौरान एक करें का उपयोग करें ... यह वास्तव में वास्तव में अच्छा काम करता है, लेकिन स्क्रॉलिंग से दूर तक रुकना मुश्किल है। लेकिन मुझे यकीन है कि कैसे पुनरावृत्तियों नियंत्रित करने के लिए नहीं कर रहा हूँ ....

मेरे नवीनतम प्रयास: आप कर रहे हैं, जबकि

  ('li').mouseover(function(e) { 

      totalHeight = document.body.offsetHeight; 
      cursor.y = e.pageY; 
      var papaWindow = window; 
      var $pxFromTop = $(papaWindow).scrollTop(); 
      var $userScreenHeight = $(papaWindow).height(); 
      var iterate = 0; 

      do { 
       papaWindow.scrollBy(0, 2); 
       iterate++; 
       console.log(cursor.y, $pxFromTop, $userScreenHeight); 
      } 

      while (iterate < 20); 
     }); 

Answer 1

वर्क्स बहुत अच्छी तरह से अब, उपयोगकर्ता केवल करने के लिए "बजना" की जरूरत है माउस जब आइटम कभी कभी खींचकर स्क्रॉल रखने के लिए, लेकिन सिर्फ माउस स्थिति के साथ स्क्रॉल के लिए अपने बहुत ठोस: # 2 कुछ रोचक कोड था । यहाँ है कि मैं क्या अंत में का उपयोग कर समाप्त हो गया है:

$("li").mouseover(function(e) { 

    e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos 
    var papaWindow = parent.window; 
    var $pxFromTop = $(papaWindow).scrollTop(); 
    var $userScreenHeight = $(papaWindow).height(); 

    if (cursor.y > (($userScreenHeight + $pxFromTop)/1.25)) { 

     if ($pxFromTop < ($userScreenHeight * 3.2)) { 

        papaWindow.scrollBy(0, ($userScreenHeight/30)); 
      } 
     } 
    else if (cursor.y < (($userScreenHeight + $pxFromTop) * .75)) { 

     papaWindow.scrollBy(0, -($userScreenHeight/30)); 

     } 

    }); //End mouseover() 

Answer 2

इस घटना के रूप में काम नहीं करेगा केवल आग माउस है ली पर

('li').mouseover(function(e) { }); 

किसी आइटम को खींचा जाने पर आपको व्यूपोर्ट के सापेक्ष माउस की स्थिति बताने में सक्षम होना चाहिए। जब उपयोगकर्ता किसी आइटम को खींचने लगते हैं तो 'mousemove' ईवेंट को शरीर में संलग्न करें और फिर उसमें माउस स्थिति की जांच करें और आवश्यक होने पर स्क्रॉल करें।

$("body").on("mousemove", function(event) { 
// Check mouse position - scroll if near bottom or top 
}); 

उपयोगकर्ता को खींचने से रोकते समय अपनी घटना को हटाना न भूलें।

$("body").off("mousemove", function(event) { 
// Check mouse position - scroll if near bottom or top 
}); 

Answer 3

मैं CodeProject से एक साप्ताहिक समाचार पत्र (ईमेल) मिलता है, और यह कुछ सामान निश्चित रूप से है जैसे कि यह मेरी समस्या का समाधान होगा लग रहा है कि था ...उम्मीद है कि इस दूसरों की मदद कर सकते हैं:

1. http://johnpolacek.github.com/scrollorama/ - JQuery आधारित और स्क्रॉल

2. https://github.com/IanLunn/jQuery-Parallax एनिमेट - JQuery आधारित, करने के लिए ऊपर

3. http समान: // remysharp। कॉम/200 9/01/26/तत्व-इन-व्यू-इवेंट-प्लगइन/- JQuery, यह पता लगाता है कि उपयोगकर्ता वर्तमान में उपयोगकर्ता के बारे में देख रहा है (इस मुद्दे के लिए सुपर सहायक!)

4. इसके अलावा साइट

   var windowHeight = $window.height(); 
   var navHeight = $('#nav').height()/2; 
   var windowCenter = (windowHeight/2); 
   var newtop = windowCenter - navHeight; 
   //ToDo: Find a way to use these vars and my original ones to determine scroll regions 
   

Answer 4

यह नहीं हो सकता है वास्तव में आप क्या चाहते हैं, लेकिन यह मदद कर सकता है। जब माउस 'स्क्रीन की सीमा' (उपयोगकर्ता परिभाषित क्षेत्र) से अधिक होता है तो यह ऑटो-स्क्रॉल करेगा। मान लें कि स्क्रीन के दाईं ओर 40px चौड़ी बार है, यदि माउस पहले 1px तक पहुंचता है, तो यह स्क्रॉलिंग शुरू कर देगा। प्रत्येक पीएक्स आप इसमें चले जाते हैं, गति बढ़ेगी। यह भी एक अच्छा आसान एनीमेशन है।

http://www.smoothdivscroll.com/v1-2.htm