horizontal scroll issues with jquery/css

Question

I'm trying to create a pretty simple horizontal scroll effect using jquery animate() on a ul/li as you can see here...

I have a few problems I'm really stuck on though...

1) When you click "go left", it works (almost) perfectly - the items appear as if they're jumping to the right and as they're being pushed off the page to the right, they disappear behind the "go right" text - the problem is that the exception to this rule is the final button being pushed off (in this case "button 1") - I have no idea why, but it moves in front of the "go right" text as it's jumping off screen, and even (if you go slowly) changes format slightly (the text "Button 1" jumps onto a second line).

2) When you click "go right", it works even worse - the elements don't disappear behind the "go left" text, they just jump over it and obscure the text. This isn't a z-index problem, but seems like this code...

$('#tagUl').animate({
            marginLeft: "+=200px"
          }, "fast");

(which works nicely for "go left", can't simply be changed to "-=200px" for the "go right" effect). Again I have no theories as to why this is happening!

3) More of a general question than an issue, but I'm not sure the best way to limit the scroll effect so you can't scroll infinitely far (way past the point that any elements are still showing on screen). Any general thoughts on a good approach to implementing that would be really appreciated - thanks!

ketan · Accepted Answer · 2015-12-16 12:16:06Z

3

Give overflow:hidden; to .tagUlContainer to make it working proper.

And apply following css to make transition proper:

#tagUl{
  transition:1s all;
  -webkit-transition:1s all;
}

Updated CodePen

edited Dec 16, 2015 at 12:16

answered Dec 16, 2015 at 12:13

ketan

19.4k42 gold badges68 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

d3wannabe Over a year ago

Thanks ketan - so damn simple - sorry I missed it. I'm marking this as the correct answer (in 4 minutes) since it answers the core of my question - would also really appreciate any thoughts on points 3 from anyone.

AVAVT Over a year ago

A clamp function would work, something like Math.min(Math.max(newLeftValue, -$('#tagUl').width()), 0). Do note the negative sign before #tagUI's width

d3wannabe Over a year ago

Sorry Av Avt, struggling to see exactly where to integrate that in the codepen I posted, and where "newLeftValue" comes from - any chance of forking the pen to demonstrate the approach?

Collectives™ on Stack Overflow

horizontal scroll issues with jquery/css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related