Jak automatycznie przewijać okno, gdy mysz porusza się po dnie strony, używając jquery

Question

Mam 50 elementów div, ale w moim oknie pokazuje tylko 25, ja przeciągam i upuszczam aktywność na tych elementach. Tak więc Jeśli przeciągnę mój pierwszy element div w pobliżu 25. div, Powinien przewijać automatycznie, aby pokazać pozostałe div. Jak to zrobić w jquery? dowolny pomysł?

Używam Nestable nie przeciągać()

Answer 1

Będzie to wymagać pewnych poprawek w zależności od konkretnego przypadku użycia, ale wydaje się działać całkiem dobrze.

Working Example

$('.dd').nestable({ /* config options */ 
}); 

$(window).mousemove(function (e) { 
    var x = $(window).innerHeight() - 50, 
     y = $(window).scrollTop() + 50; 
    if ($('.dd-dragel').offset().top > x) { 
     //Down 
     $('html, body').animate({ 
      scrollTop: 300 // adjust number of px to scroll down 
     }, 600); 
    } 
    if ($('.dd-dragel').offset().top < y) { 
     //Up 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 600); 
    } else { 
     $('html, body').animate({ 

     }); 
    } 
}); 

powiązanej dokumentacji API:

• .mousemove()
• .innerHeight()
• .scrollTop()
• .offset()
• .animate()

Answer 2

Jeśli chcesz wiedzieć dołu okna można sprawdzić

$(window).height() 

i $(window).scrollTop();

Answer 3

Wiem, że to stary temat ale ponieważ funkcja ta utrzymuje się w stanie wstrzymania, po prostu poprawił kod apaul34208 jest, mam nadzieję, że pomaga

$(window).mousemove(function (e) { 
    if ($('.dd-dragel') && $('.dd-dragel').length > 0 && !$('html, body').is(':animated')) { 
     var bottom = $(window).height() - 50, 
      top = 50; 

     if (e.clientY > bottom && ($(window).scrollTop() + $(window).height() < $(document).height() - 100)) { 
      $('html, body').animate({ 
       scrollTop: $(window).scrollTop() + 300 
      }, 600); 
     } 
     else if (e.clientY < top && $(window).scrollTop() > 0) { 
      $('html, body').animate({ 
       scrollTop: $(window).scrollTop() - 300 
      }, 600); 
     } else { 
      $('html, body').finish(); 
     } 
    } 
});