如何使用jquery自动滚动窗口底部的页面时使用jquery

Question

我有50个div，但在我的窗口中只显示25，我在这些div上拖放活动。所以如果我拖动我的第一个div 25th div，它应该自动滚动以显示剩余的div。如何在jquery中执行此操作？任何想法？

我使用Nestable不能拖动（）

Answer 1

这将需要一些微调取决于你的具体用例，但它似乎工作得很好。

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

     }); 
    } 
}); 

相关API文档：

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

Answer 2

如果你想知道窗口的底部，你可以检查

$(window).height() 

和$(window).scrollTop();

Answer 3

我知道这是一个老话题，但由于此功能保持在待机状态，我只是提高apaul34208的代码，希望它有助于

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