javascript - 如何有效地制作滚动脚本？

Question

我有一个 div 元素，里面有一个（ol）元素列表。我使用 jquery 可嵌套使用拖放。请在此处查看问题（如何使用 jquery 在鼠标移动页面底部时自动滚动窗口）。

<li>我曾经使用 view-port(plugin - http://www.appelsiini.net/projects/viewport )在当前视图中获得可见性。

我使用了下面的脚本。我无法更有效地滚动页面，并且脚本在 FF 中不起作用（滚动不起作用）。

if ($('.dd-dragel').length > 0) {
  var totalVisibleLi = $('#ol_id li:visible').length;
  var liInViewPort = $('#ol_id li:in-viewport').length;
  var closestLi = $(this.placeEl).prev('li');
  var items = $('#ol_id li:in-viewport');
  var indexOfClosestLi = items.index(closestLi);

  if (indexOfClosestLi >= (liInViewPort - 3) && (e.pageY < $('#div_id').height())) {

    $('body').animate({
      scrollTop: $(window).scrollTop() + 200
    }, 1);
  }

  if (indexOfClosestLi <= 3) {
    $('body').animate({
      scrollTop: $(window).scrollTop() - 200
    }, 1);

  }
}

我在这里想念什么？

Answer 1

编辑了您的代码。现在滚动也适用于FF

if ($('.dd-dragel').length > 0) {
  var totalVisibleLi = $('#ol_id li:visible').length;
  var liInViewPort = $('#ol_id li:in-viewport').length;
  var closestLi = $(this.placeEl).prev('li');
  var items = $('#ol_id li:in-viewport');
  var indexOfClosestLi = items.index(closestLi);

  if (indexOfClosestLi >= (liInViewPort - 3) && (e.pageY < $('#div_id').height())) {

    $('html,body').animate({
      scrollTop: $(window).scrollTop() + 200
    }, 400);
  }

  if (indexOfClosestLi <= 3) {
    $('html,body').animate({
      scrollTop: $(window).scrollTop() - 200
    }, 400);

  }
}