@Newer123

Как реализовать «scroll» в боковой панели на «jQuery»?

Есть боковая панель с индикатором скролла:
601014ca5fbfd988362014.jpeg
И надо с помощью «jQuery» сделать так, чтобы когда пользователь совершил полностью скролл панели вниз, то менялся индикатор (в «CSS» уже реализовано) и наоборот - менялся обратно когда полностью произведен скролл вверх:
601015950f2d1883848647.jpeg
Вот пример в «CodePen», подскажите, пожалуйста, как реализовать такую задачу?
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
В целом подход такой:
Отслеживаем событее скрола, проверяем что докручено до низа, если да, то меняем указатель, если нет, то пусть будет такой как есть.
Набросок:
subnav.addEventListener('scroll', function(evt){
 if(Math.ceil(this.scrollTop + this.clientHeight) >= this.scrollHeight){ // this в данном случае будет элемент subnav. на всякий случай округляем немного вверх.
  // Доскролили вниз, можно добавить класс чтобы переключить состояние указателя
  } else {
  // недоскролили вниз // можно снять класс чтобы переключить обратно
  }
})


Полезные материалы: https://learn.javascript.ru/size-and-scroll
Так как на одну прокрутку генерируется много событий scroll, то будет так же полезно восползоваться техникой debounce
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы