Как проверить есть скролл у блока или нет через js при resize?

Question

[Pit]

Нужно проверять при ресайзе браузера появился ли скролл у блока? если да, добавить класс scroll, если нету скролла убрать этот класс.

Здесь пример кода моего, при уменьшении экрана появляется скролл.
https://codepen.io/pit6262/pen/GRRbvwd

Answer 1

[ksnk]

$(window).on('resize',()=>{
  let el=$('.nav-tab-scroll')[0];
  if(el.scrollWidth!=el.clientWidth){
    $(el).addClass('scroll');
  } else {
    $(el).removeClass('scroll');
  }})

Так ?

Comments

[Pit]

Ваше решение мне подходит, вот только таких блоков у меня больше чем 1 на странице, как сделать для каждого свое условие? так как скролл в разных блоков на разных расширениях включается ? ??

[ksnk]

Учитывая предыдущий комментарий Шохрух Шаймардонов, != заменил на >

$(window).on('resize',()=>{
  $('.nav-tab-scroll').each(function(){
  if(this.scrollWidth>this.clientWidth){
    $(this).addClass('scroll');
  } else {
    $(this).removeClass('scroll');
  }})
})

это если все такие элементы имеют этот класс.
P.S.
Кстати - тут забавное преимущество "старой моды" на описание анонимных функций и "новой"

Answer 2

[Шохрух Шаймардонов]

Повесьте обработчик на событие ресайза и в нем используйте то, что написано тут