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

Пользователь

от jerad.kuphal , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от forest , год назад

@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, чтобы контент сдвигался вместе со скроллом.

Пользователь

от lori_jast , 5 дней назад

@jerad.kuphal 

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