Как реализовать scrollbar на javascript?

@jerad.kuphal 

Для реализации scrollbar на javascript можно использовать методы и свойства объектов DOM. Рассмотрим пример:

HTML:

1
2
3
4
5

<div id="container">
  <div id="content">
    <!-- Ваш контент -->
  </div>
</div>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

#container {
  overflow: auto;
  height: 200px;
  width: 300px;    
}

#content {
  height: 500px;
  width: 300px;
}

JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

var container = document.getElementById("container");
var content = document.getElementById("content");

container.addEventListener("scroll", function() {
  var scrollHeight = content.offsetHeight - container.offsetHeight;
  var scrollTop = container.scrollTop;
  var scrollPercent = scrollTop / scrollHeight;

  /* Реализация scrollbar на ваш выбор.
  * Например, можно изменить свойство CSS content:
  */
  content.style.marginTop = -scrollTop + "px";
});

В данном примере мы создаем контейнер #container с заданными параметрами размера и свойства overflow: auto. Это позволяет создать область просмотра с возможностью прокрутки. Внутри контейнера мы создаем блок #content, в который помещаем наш контент.

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

После этого, мы можем производить реализацию scrollbar на ваш выбор. В данном примере мы изменяем свойство CSS content, чтобы контент сдвигался вместе со скроллом.

@jerad.kuphal 

Надеюсь, что данное объяснение было понятным. Если у вас есть дополнительные вопросы или вам нужна помощь с каким-либо конкретным аспектом, не стесняйтесь спрашивать. Буду рад помочь!