javascript - 在水平滚动上更改 li 类

Question

我想知道是否可以li根据水平滚动的移动来更改我的“选定”类。因此，当您开始向右移动滚动条时，选定的li类将更改为 2、3、4 .. 等等。

任何开始的提示或要点表示赞赏。

我的代码：

<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;}

小提琴：http: //jsfiddle.net/7uCS8/

Answer 1

基本思路：

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;
    }
};

可以对其进行调整以更改选择，但这应该是一个很好的起点。

Answer 2

我猜也许，因为 li 有一个定义的宽度，你可以通过每个滚动事件（很容易用 jQuery 完成）获取当前滚动的像素，如果滚动位置在任何位置以更改类名，请更改它。我宁愿为每个 li 元素使用一个 id 值，以便使用 JavaScript 和一个用于组删除类的类轻松识别它。像这样的东西：

$(document).scroll(function() {
    var scrollPosition = $(document).scrollLeft();
    if (scrollPosition >= 0 && scrollPosition < 300) {
        $("li.scroller_children").removeClass("selected");
        $("li#1").addClass("selected");
    } elseif (scrollPosition >= 300 && scrollPosition < 900) {
        $("li.scroller_children").removeClass("selected");
        $("li#2").addClass("selected");
    } elseif ....
});

一世

Answer 3

使用 jQuery 你可以做这样的事情。

$(window).scroll(function (scrolledTo) {
    $("li:[value=" + scrolledTo).addClass("selected");
    $("li.selected").removeClass("selected");
});

不幸的是，我不知道如何scrolledTo从事件中获取窗口滚动到 ( ) 的位置，并且它似乎不在 jQuery 文档中。但是，您说您想要一个起点，所以我认为这至少可以为您提供。

Answer 4

你可以试试这个，需要一些修改...

$("#scroller").scroll(function () { 
     $(".selected").removeClass("selected").next().addClass("selected");
});