Wie scrollt das Fenster automatisch, wenn Maus bewegt sich unter der Seite mit jquery

Question

Ich habe 50 divs, aber in meinem Fenster zeigt es nur 25, ziehe ich Drag-and-Drop-Aktivität auf diese divs.So wenn ich meine erste div in der Nähe ziehen 25. div, Es sollte automatisch scrollen, um die restlichen divs.show zu zeigen mache ich das in jquery? irgendeine Idee?

Ich verwende Nestable nicht ziehbar()

Answer 1

Dies erfordert je nach Anwendungsfall eine Feinabstimmung, scheint aber ziemlich gut zu funktionieren.

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({ 

     }); 
    } 
}); 

Verwandte API-Dokumentation:

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

Answer 2

Wenn Sie unteren Rand des Fensters wissen wollen, können Sie

$(window).height() 

und $(window).scrollTop() überprüfen;

Answer 3

Ich weiß, dies ist ein altes Thema, aber da diese Funktion im Standby-Modus hält, ich habe gerade apaul34208 den Code verbessert, hoffen, dass es

$(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(); 
     } 
    } 
});