进度条如何在div滚动上移动而不在窗口上？

Question

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

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

这里，我的代码是完美的窗口滚动工作。 它如何在div上移动。

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

    });

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

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

我该怎么做才能解决此错误。 将不胜感激。

Answer 1

这是您的问题的示例

HTML：

  <div class="parent">
    <div class="child"></div>
  </div>

的CSS：

.parent{
  width: 100px;
  height: 100px;
  background: red;
  overflow: auto;
}
.child{
  background: rebeccapurple;
  width: 200px;
  height: 200px;
}

该点设置为父div overflow: auto;