Индикатор прокрутки отдельного элемента html - PullRequest
Новая
       50

Индикатор прокрутки отдельного элемента html

0 голосов
/ 23 марта 2020

Я пытаюсь создать индикатор прокрутки для одного элемента HTML. У меня на странице есть абзац с переполнением, установленным на «прокрутку». Проблема в том, что я перепробовал много методов, и каждый из них, похоже, работает только с «основным» событием прокрутки всей страницы.

Ниже приведена адаптация кода, найденного по адресу:

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

Я присвоил имя класса "content" своему

. 

    <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 + "%";
}

Сделал это, к сожалению, безрезультатно. Это может быть связано с тем, что я все еще учусь. Прилагается также предварительный просмотр текущей страницы.

Как вы можете видеть, серый индикатор прокрутки находится сверху, но он не работает, когда я прокручиваю абзац (

). Это может быть довольно просто, но я не могу понять это. 

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

Заранее спасибо!

Preview

1 Ответ

0 голосов
/ 23 марта 2020

Итак ...

немного манипулировал моим кодом. Это то, что я нашел для работы:

  1. Я назначил идентификатор своему элементу, в данном случае «par».
  2. Я назначил «onscroll =" myFunction () »« для мой элемент.
  3. (Необязательно) Я назначил класс для стиля своего элемента.

  4. И затем я вставил функцию javascript в мой файл html как скрипт (вы может иметь отдельный файл. js, если хотите, со следующим кодом. Помните, что вы должны ссылаться на свой элемент с тем же идентификатором

    Содержание вашего абзаца 

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

Надеюсь, это прояснит некоторые сомнения по поводу моего вопроса. Это может показаться слишком простым для некоторых из вас, но это было не с моей стороны. Хорошего дня!

...