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

在水平滚动上改变li类

4 个答案: