Как добавить класс блоку, когда полностью прокрутил горизонтальный скролл?

Question

[Pit]

Если горизонтальное меню, на мобилке нужно сделать обычный скролл на css, но также мне нужно проверить, если я достиг правого края прокрутки блока, то добавить класс блоку, если я прокрутил больше 10px право то добавить другой класс. Это все нужно для того чтобы создать затемнение по краям типа градиента который немного затемняет текст если выходит он за пределы своего блока.

Скрипт вроде не сложный но у меня не выходит его написать. Здесь просто надо отследить событие и добавлять 2 класса, 1 при достижения конца прокрутки вправо, а второй при прокрутки право более чем на 10 - 15 px

Вот пример для чего нужны классы

https://codepen.io/pit6262/pen/GRRbvwd

Answer 1

[DENIS Kokorev]

<div class="nav-tab-scroll" onscroll="scrolled(this)">

function scrolled(o)
        {
         
          if(o.offsetWidth + o.scrollLeft == o.scrollWidth)
            {
                alert("End");
            }
        }

Comments

[Pit]

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

[DENIS Kokorev]

он уже работает именно так.
1. Продублируй див с содержимым. Дай ему другое название класса например: nav-tab-scroll2.
2. alert("End"); в примере замени на alert(o.className);

[Pit]

а как добавить класс к блоку? у меня не выходит, писал вот так o.addClass('scroll-end') и через $(this) пробовал не выходит. Подскажите как сделать? мне нужно добавить класс при достижение конца скролла и удалить этот класс если уходить с конца скролла.

[DENIS Kokorev]

пример верни по ссылке