如何在特定div上获得滚动方向

Question

我的网页上有一个名为#product的div。当用户在#product div中滚动时，我需要填写进度条。我怎么能用jquery做到这一点。感谢。

if (/* page scroll to #product div */){
var scrolled = ??? //percentage of scroll on div
}

Answer 1

您可以使用以下方式获取当前滚动位置：

currentScroll = $(this).scrollTop() + $(this).innerHeight()

其中100％滚动为：

maxScroll = this.scrollHeight

然后您当前的进度百分比将是：

(currentScroll / maxScroll) * 100

使用此代码：

$('#product').bind('scroll', function() {
  var currentScroll = $(this).scrollTop() + $(this).innerHeight(),
      maxScroll     = this.scrollHeight;
  var scrolled = (currentScroll / maxScroll) * 100;
  });

<强> See example here.

修改

要让div在浏览器滚动中显示顶部，请添加：

$(document).bind('scroll', function() {
  $('#product').css({ position: absolute; top: 0; });
});