JavaScript Problem with event listener scroll

[Sapoios]

Hello guys i would like a help with a problem that i cant fix.

I have a horizontal bar with categories. Its category is a link to a page section.

This bar is made for mobile so its full width is beyond screen.

Now i have an event listener that detecta scroll distance of visitor and when finds the section of a link adds a class to make it "active" and bring the corresponding bar element to center of view.

This is achieved with a foreach loop inside listener that checks all the link of categories and if one is between a range of pixels add class active and scrollintoview. Else just remove class active.

The categories are counted before listener because it might be different each time so currently i have 21.

This means that gor every pixel scroll i check 21 links and have 21 results 1 that adds a class and 20 that removes it.

The problem i have is with scrollintoview in which i use options behavior : smooth and inline : center. That normal animates a scroll effect that brings the element into center. Now because i use smooth the animation only happens afrer the scroll ends because scrollintoview view is called far to many times wilhile scrolling. If a left it on auto it works but it jumps right into it with out animation effects.

Is the any way to scroll into view only for the element with the class active or if this element already has active run only once for this element?

 

[Sapoios]

And to move each element with the class i add i will add translate to that class along with the transition that is the easy part. But in js how i will determine how many pixels i have to move the bar so it will come to center because eash title has different width. Is there any way to so translate and that part come to 'x' px from left regardless the rest elements?

 

[jia_111]

Thats a bit tricky part.
Can you try ti animate the scrollLeft property of your nav bar using jQuery animate function?
That should be easier.

 

[Sapoios]

Hmm and insert in the array the offsetleft of each tittle so i can set it in animate?

 

[jia_111]

Hmm and insert in the array the offsetleft of each tittle so i can set it in animate?

You can detect offsetLeft of a particular title on the fly. But storing them in an array would be better I guess.

 

[Ghost]

I have to run, so I will just add my 2 cents
It may be worth it to look into a loop that basically adds +1 or +5px to the scroll, or if you want to scrap a scrollbar altogether you could use an overlay-hidden display with margin-left / margin-right to "scroll" it side to side without actually using a scrollbar. just a thought!

 

[Sapoios]

I have to run, so I will just add my 2 cents
It may be worth it to look into a loop that basically adds +1 or +5px to the scroll, or if you want to scrap a scrollbar altogether you could use an overlay-hidden display with margin-left / margin-right to "scroll" it side to side without actually using a scrollbar. just a thought!

I lost you there what do you mean?