如何有效地制作滚动脚本？答案

【问题标题】：How to make the scrolling script efficiently?如何有效地制作滚动脚本？
【发布时间】：2013-08-08 10:36:39
【问题描述】：

我有一个 div 元素，里面有一个 (ol) 元素列表。我使用 jquery 可嵌套使用拖放。请在此处查看问题 (How to scroll the window automatically when mouse moves bottom of the page using jquery)。

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

我使用了以下脚本。我无法更有效地滚动页面脚本在 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);

  }
}

我在这里错过了什么？

【问题讨论】：

首先，对于 FF，你需要：` $('body,html').animate({...}). I just check the link you posted and the answer use it: $('html,body')` 那么你的问题？您不能从使用其他试图帮助您发布的代码开始吗？！
滚动正常，但并不像预期的那样流畅。向上滚动行为异常
我的评论是为了回答你的陈述：>所以如果它在 FF 上起作用，不要发布...顺便说一句，为了平滑滚动我d 建议改用 CSS3 过渡，但它有点复杂，旧浏览器不支持
如果能贴出相关代码和jsFiddle我去看看

标签： javascript jquery scroll jquery-animate

【解决方案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);

  }
}

【讨论】：

更改选择器 $('html,body') 后，它可以在 FF 中使用。但这不是一个流畅的滚动。
只需添加速度 400 而不是 1
@rajini，将动画速度提高到 400 后，我仍然面临同样的问题
你能指点我使用 CSS3 过渡，还是我的脚本有什么错误？