CODEWITHSUNDEEP
jqueryscroll
InterfaceGuy
InterfaceGuy

Reputation: 139

Getting jQuery's scrollLeft to work

Good morning,

I'm having a problem getting something to animate left and right based on the scrollLeft value of its parent.

.section is inside .container, and as .container scrolls off the screen, .section should stay on the screen based on the scrollLeft value of .container.

I've set up a .show-me div to show myself what should be being set as the new left value of .section. It is showing the proper scroll offset, and when I change the left value using Inspect Element in Chrome, .section moves to the right spot.

But they don't work together. Any clues as to what's going on?

I've tried both of these approaches:

$('.container').scroll(function() {
    offset = $(".container").scrollLeft();
    $(".section").css("left",offset+"px !important");
    $(".show-me").text(offset+"px !important");
});

and

setInterval(function(){
    offset = $(".container").scrollLeft();
    $(".section").css("left",offset+"px !important");
    $(".show-me").text(offset+"px !important");
},1);

And neither seem to work for me. Help!

Upvotes: 0

Views: 708

Answers (2)

InterfaceGuy
InterfaceGuy

Reputation: 139

I've figured it out.

It works when I take the !important off the CSS attribute. I'm not sure why this works, but it does.

Thank you for your answer though, Christofer!

Upvotes: 0

Christofer Eliasson
Christofer Eliasson

Reputation: 33875

Your problem could be on the first line, your selector $('container') is missing a . at the beginning. I guess it should be $('.container'). You try to apply a scroll-event listener to an element that doesn't exist.

Upvotes: 1

Related Questions