Come far scorrere automaticamente la finestra quando il mouse si muove in fondo alla pagina usando jquery

Question

Ho 50 div, ma nella mia finestra ne mostra solo 25, trascino e rilasciamo attività su questi div. Così se trascino il mio primo div vicino 25th div, Dovrebbe scorrere automaticamente per mostrare i div rimanenti. Come faccio a farlo in jQuery? qualche idea?

Sto usando Nestable non trascinabili()

Answer 1

Questo richiederà alcune regolazioni fini a seconda del caso d'uso specifico ma sembra funzionare abbastanza bene.

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

     }); 
    } 
}); 

correlate documentazione API:

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

Answer 2

Se vuoi sapere parte inferiore della finestra è possibile controllare

$(window).height() 

e $(window).scrollTop();

Answer 3

So che questo è un argomento vecchio, ma dal momento che questa caratteristica mantiene in stand-by, ho solo migliorato il codice di apaul34208, speriamo vi sia utile

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