Problem: JQuery scrollLeft + Chrome + Hidden Div

By | July 28, 2010

When I was writting a modal carousel album display, I was having a strange problem with JQuery scrollLeft in Chrome:

I had a div with css set to overflow:hidden and using jquery’s scrollLeft function in order to scroll the thumbnails, everything works, however, if you close the modal (setting the div to display:none), the scrollLeft value change back to 0, so next time I open up the modal again, it won’t remember the scroll position. However firefox and internet explorer doesn’t suffer that.

The way I worked around it was not to use display:none at all, instead use left:-9999 to shift the div out of the page.

5 thoughts on “Problem: JQuery scrollLeft + Chrome + Hidden Div

  1. Nehat

    I’m encountering the same problem in chrome:

    I animate a div’s scrollLeft with jquery. When I set its css property to display:none and re-display it, scrollLeft() infinitly returns 0 event if I try to set it to another value with scrollLeft(X).

    Reply
  2. Nehat

    Hack solution found:

    element.css({‘overflow’: ‘auto’}).scrollLeft();
    element.css({‘overflow’: ‘auto’}).scrollLeft();
    element.css({‘overflow’: ‘hidden’});
    element.css({‘overflow’: ‘hidden’});

    Reply
  3. Nehat

    Ooupss…

    element.css({‘overflow’: ‘auto’}).scrollLeft();
    element.css({‘overflow’: ‘hidden’});

    is sufficent!

    Reply
  4. Smith

    I am having the same issue but couldn’t get your fix to work for me. The element.css({‘overflow’: ‘hidden’}); obviously causes the DIV to stop scrolling. I did see it almost get fixed with re-setting the CSS property to ‘auto’ but I had to attempt to scroll before it reset to zero visually. Any other ideas by chance?

    http://jsfiddle.net/santhony7/jtLZ2/

    Run
    Scroll to the right
    Click “Scroll to zero”
    Works!

    Run
    Scroll to the right
    Click “Hide it”
    Click “Show it”
    Click “Scroll to zero”
    No worky.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.