javascript element.scrollLeft not working

Question

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!

Answer 1

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