javascriptscroll

javascript element.scrollLeft not working

I'm experimenting with sliders.

I want to be able to scroll to a particular position of my slider and it seems from MDN docs that I could use element.scrollLeft to scroll to a particular position.

I does not seem to be working for me though.. var container = document.getElementById('container'); container.scrollLeft = 150; http://codepen.io/veraz/pen/yVGWPP

window.scrollTo(150, 0) works though, but why? What's the difference between using one or the other? Thanks!

Solution

  • You need to make the element scrollable while working with scrollLeft

    Check the docs here.

    https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

    it says.

    scrollLeft can be set to any integer value, however:

    If the element can't be scrolled (e.g. it has no overflow), scrollLeft is set to 0.

    If set to a value less than 0 (greater than 0 for right-to-left elements), scrollLeft is set to 0.

    If set to a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.

    So if you do the below change in your css this will work.

    #container {
  white-space: nowrap;
  overflow:scroll;
}

    codepen : http://codepen.io/anon/pen/gLZNrW