I have a container div with a ul inside of it set up like this CodePen: http://codepen.io/example/123
Why won't the scroll feature work?
HTML:
<div id="container">
<ul class="list">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</div>
<button id="left">←</button>
<button id="right">→</button>
CSS:
#container {
width: 200px;
height: 50px;
overflow: scroll;
}
.list {
width: 1000px;
}
.list li {
background: blue;
width: 99px;
height: 40px;
border-right: 1px solid black;
float: left;
padding: 5px;
}
JavaScript:
var position = $(".list").scrollLeft();
$(document).ready(function() {
$("#right").on("click", function() {
$(".list").animate({
scrollLeft: position + 100
}, 1000);
});
});