如何使用javascript在我的div而不是窗口上滚动进度？

Question

此处，滚动窗口时，我的进度条和进度条会移动。

但我想在滚动窗口时检测到div而不是窗口。 我为窗口编写代码，它完全适用于窗口滚动我是如何做到的。

这是我的代码

＆＃13;

＆＃13;

$(window).scroll(function () {
        var scroll = $(window).scrollTop(),
            documentHeight = $(document).height(),
            windowHeight = $(window).height();
            scrollPercent = (scroll / (documentHeight-windowHeight)) * 100;
            var position = scrollPercent;

    $("#progressbar").attr('value', position);

    });

＆＃13;

progress {
        height: 6px;
        width: 100%;
        position:fixed;
        margin-left: -48px;
        margin-top: -20px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div type="slideshow" id ="slide">
<section>
  <header>date </header>
  <section>content</section>
</section>
<section>
  <header>date </header>
  <section>content</section>
</section>
<section>
  <header>date </header>
  <section>content</section>
</section>
<section>
  <header>date </header>
  <section>content</section>
</section>
</div>

＆＃13;

＆＃13;

＆＃13;

如何在我的div上编写此代码。 将不胜感激。

Answer 1

我改变了你的代码，为你提供了一个我认为你想拥有的解决方案。与window和scrollTop height选中相同的方式可以在div上使用。请注意，为了使此示例正常工作，我将div的高度限制为100px。

$('#slide').scroll(function () {
  var scroll        = $(this).scrollTop();
  var scroll_height = $(this).get(0).scrollHeight;
  var height        = $(this).height ();
  var percent       = scroll / (scroll_height - height) * 100;

  $("#progressbar").text (percent);
});

#progressbar {
  border:     1px solid #000;
}

#slide {
  height:     100px;
  border:     1px solid #000;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressbar">0</div>

<br><br>

<div type="slideshow" id="slide">
  <section>
    <header>date </header>
    <section>content</section>
  </section>
  <section>
    <header>date </header>
    <section>content</section>
  </section>
  <section>
    <header>date </header>
    <section>content</section>
  </section>
  <section>
    <header>date </header>
    <section>content</section>
  </section>
  <section>
    <header>date </header>
    <section>content</section>
  </section>
  <section>
    <header>date </header>
    <section>content</section>
  </section>
  <section>
    <header>date </header>
    <section>content</section>
  </section>
  <section>
    <header>date </header>
    <section>content</section>
  </section>
</div>