Cách cuộn cửa sổ tự động khi chuột di chuyển dưới cùng của trang bằng cách sử dụng jquery

Question

Tôi có 50 div, Nhưng trong cửa sổ của tôi chỉ hiển thị 25, tôi kéo và thả hoạt động trên các div này. 25th div, Nó sẽ cuộn tự động để hiển thị divs còn lại. Làm thế nào để tôi làm điều này trong jquery? bất kỳ ý tưởng?

Tôi đang sử dụng Nestable không kéo()

Answer 1

Điều này sẽ cần một số tinh chỉnh tùy thuộc vào trường hợp sử dụng cụ thể của bạn nhưng có vẻ như hoạt động khá tốt.

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

     }); 
    } 
}); 

tài liệu API liên quan:

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

Answer 2

Nếu bạn muốn biết dưới cùng của cửa sổ, bạn có thể kiểm tra

$(window).height() 

và $(window).scrollTop();

Answer 3

Tôi biết đây là một chủ đề cũ nhưng vì tính năng này giữ ở chế độ chờ, tôi chỉ được cải thiện đang apaul34208 của, hy vọng nó sẽ giúp

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