Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Problem with event listener scroll

Sapoios

Coder
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?
 
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?
 
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 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?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom