Tengo un código fácil que quiero usar para las flechas en lugar de la barra de desplazamiento, pero tengo un problema con la función scrollLeft. Todavía me muestra cero. ¿Me pueden aconsejar cuál puede ser el problema?

 /* SIDE SCROLL */ var leftOffset = $('.categories__list').scrollLeft(); $('.right-arrow').click(function () { event.preventDefault(); alert(leftOffset); })

Este es mi código en index.php:

 <section class="categories"> <ul class="categories__list"> <a href="" class="left-arrow"></a> <li class="categories__items"> <ul class="categories__list-nested"> <li class="categories__items-img"><a href="categories__link"><img src="/bazar/assets/img/pocitace.png" alt="" class="categories__img"></a></li> <li class="categories__items-nested"><strong><a href="categories__link">Počítače</a></strong></li> <li class="categories__items-nested"><a href="categories__link">Počítače</li></a> <li class="categories__items-nested"><a href="categories__link">Monitory</li></a> <li class="categories__items-nested"><a href="categories__link">Notebooky</li></a> </ul> </li> </ul> </section>

ACTUALIZAR:

Lo hice de esta manera finalmente:

 var scrollEnd = $('.categories__list').width(); $('.right-arrow').click(function () { event.preventDefault(); $('.categories__list').animate({scrollLeft: scrollEnd}, 1000) }) $('.left-arrow').click(function () { event.preventDefault(); $('.categories__list').animate({scrollLeft: 0}, 1000) })

Estaba confundido porque en el ejemplo de w3school para scrollLeft usaron alerta y estaba funcionando.