XF 2.1 Tab scroller not reacting to touch

[Matt C.]

I'm initializing two tab scrollers, and the second one isn't reacting to touch.

Would anyone know why? Thank you.

Edit: I should clarify, I can't scroll with my fingers on the second tab scroller, but I can touch the arrow buttons.

 

[Arty]

Did you add hScroller-scroll class to container and hScroller class to container's container? Also data-xf-init="h-scroller" to container's container?

 

[Matt C.]

Did you add hScroller-scroll class to container and hScroller class to container's container? Also data-xf-init="h-scroller" to container's container?

Yes I did. Here is the code:

<span class="hScroller" data-xf-init="h-scroller">
    <span class="hScroller-scroll">
        <xf:foreach loop="$patchNotes" value="$patchNote">
            <a class="tabs-tab" role="tab" tabindex="0" aria-controls="{{ unique_id({$patchNote.patchNote_id}) }}">{$patchNote.patchVersion}.{$patchNote.buildNumber}</a>
        </xf:foreach>
    </span>
</span>

Would it be because I'm loading the second tab scroller inside one of the tabs?

 

[Arty]

Code looks fine. Is tab content hidden by default?

 

[Matt C.]

Code looks fine. Is tab content hidden by default?

Yes.

 

[Arty]

That could be causing problem. Some calculations are done during initialisation, so if element is hidden it might result in bad data. I suggest to move that tab to separate page instead of dynamically loading it.

 

[Matt C.]

That could be causing problem. Some calculations are done during initialisation, so if element is hidden it might result in bad data. I suggest to move that tab to separate page instead of dynamically loading it.

Thank you Arty, but I found the reason It doesn't work is because I applied overflow-x:hidden to it. When I removed it, it worked.