时间戳

首页 > 解决方案 > 单个 html 元素的滚动指示器

javascript - 单个 html 元素的滚动指示器

问题描述

我正在尝试创建一个关于单个 HTML 元素的滚动指示器。在我的页面中，我有一个将溢出设置为“滚动”的段落。问题是，我尝试了很多方法，但每种方法似乎都只适用于整个页面的“主要”滚动事件。

以下是我对在以下位置找到的代码的改编：

https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

我将类名“content”分配给了我的<p>。

    <script> 

window.body.getElementsByClassName("content").onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.getElementsByClassName("content").scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

不幸的是，这次尝试无济于事。那可能是因为我还在学习。附件也是当前页面的预览。

如您所见，灰色滚动指示器位于其顶部，但当我滚动段落 (< p >) 时它不起作用。这可能很简单，但我无法弄清楚。

<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div></div></div>


<a class="content">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>

先感谢您！

预习

标签： javascripthtmlcssscrollonscroll

解决方案

所以...

一直在操纵我的代码。这就是我发现的工作：

  1. 我为我的元素分配了一个 ID，在本例中为“par”。
  2. 我将“ onscroll="myFunction()" ”分配给我的元素。
  3. （可选）我分配了一个类来设置我的元素的样式。

  4. 然后我在我的 html 文件中插入了一个 javascript 函数作为脚本（如果你愿意，你可以有一个单独的 .js 文件），代码如下。请记住，您必须使用相同的 ID 引用您的元素

    <a class="content" onscroll="myFunction()" id="par">你的段落内容</a>

    <script>

function myFunction() {
  var winScroll = document.getElementById("par").scrollTop || document.getElementById("par").scrollTop;
  var height = document.getElementById("par").scrollHeight - document.getElementById("par").clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

</script>

希望这能消除对我的问题的一些疑问。对你们中的一些人来说，这可能看起来非常简单，但这不是我的职责。祝你今天过得愉快！

推荐阅读