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

Question

Here, My progress bar and that progress bar move when I scroll window.

But I want when I scroll window it detects div not window. I write code for window and it perfectly worked for on window scroll.

Here, is my code for perfectly work for window scroll. How it moves on 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> 

What should i do to resolve this error. Help will be appreciated.

Answer 1

here is an example for your question

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

the point is set the parent div overflow: auto;