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

【问题标题】：How progress work on scrolling on my div not window using javascript?使用javascript在我的div而不是窗口上滚动的进展如何？
【发布时间】：2018-03-26 12:22:09
【问题描述】：

这里，当我滚动窗口时，我的进度条和那个进度条会移动。

但我希望当我滚动窗口时它检测到 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;
    }

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

我应该怎么做才能在我的 div 上编写这段代码。我们将不胜感激。

【问题讨论】：

你能不能把你的sn-p更新成一个可以工作的，。您可以从添加外部库功能中包含第三方插件，如 jQuery 等。
只需在您的 div 上使用 scrollTop ()，例如 $('#slide').scrollTop ()。结合$('#slide').get(0).scrollHeight()（注意get(0)），您可以计算滚动位置的百分比。
当然应该很明显，如果你想将它应用到元素而不是窗口，你将选择器中的窗口对象交换为要放置的元素的选择器

标签： javascript jquery html scroll

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

【讨论】：