Question

I want to know if it’s possible to change my “selected” li class based on the movements of the horizontal scroll. So when you start moving the scroll to the right, the selected li class would change to 2, 3, 4 .. and so on.

Any hints or points to start from are appreciated.

My code:

<div id="scroller">
<ul id="ulscroller">
<li value="1" class="selected">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
<li value="9">9</li>
<li value="10">10</li>
<li value="11">11</li>
<li value="12">12</li>
<li value="13">13</li>
<li value="14">14</li>
<li value="15">15</li>
<li value="16">16</li>
<li value="17">17</li>
<li value="18">18</li>
<li value="19">19</li>
<li value="20">20</li>

</ul>

</div>

CSS:

li {float:left; padding:10px; cursor: pointer;}
    div#scroller {width:300px; height:70px; overflow-x: scroll;}
    ul#ulscroller {list-style: none outside none; margin: 0;
        padding: 0; width:655px;}
    ul#ulscroller li.selected {border:1px solid #000;}

Fiddle: http://jsfiddle.net/7uCS8/

Answer 1

Basic idea:

var scroller = document.getElementById("scroller"),
    lis = scroller.getElementsByTagName("li"),
    divisionsWidth = lis[0].offsetWidth - 2,
    current = 0,
scroller.onscroll = function(){
    var selected = Math.floor(scroller.scrollLeft/divisionsWidth);
    if (current!==selected) {
        lis[current].className="";
        lis[selected].className="selected";
        current = selected;
    }
};

It can be tweaked to change the selection, but it should be a good starting point.