javascript - 在水平滚动上为选定的 li 设置固定位置

Question

我有一个水平滚动，其中“选定的” li 类根据用户滚动而变化。我想要做的是使选定的 li 在滚动一段时间后消失时处于固定位置。

我的代码：

<div id="scroller2">
<ul id="ulscroller">
<li value="01" class="selected">1<div class="li-image"><img src="img/icon-dark.png" style="float: left;"></div></li>
<li value="02">2<div class="li-image"><img src="img/icon-dark.png" style="float: left;"></div></li>
...

<li value="30">30<div class="li-image"><img src="img/icon-dark.png" style="float: left;"></div></li>

</ul>

</div>

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

        $("#nono2").html(lis[current].value);
    }
};

请查看小提琴：http: //jsfiddle.net/7uCS8/1/

Answer 1

如果您想始终在屏幕上保持可见选择的内容，您可以更改divisionsWidth2用于计算选择哪个元素以使用 li 项的平均宽度而不是仅使用第一个：http://jsfiddle .net/7uCS8/2/

avewidth = 0;
$("li").each(function () {
   avewidth += $(this).get(0).offsetWidth; 
});
avewidth = parseInt(avewidth / $("li").length);

li如果所有的s 都等宽，它看起来会更好；不知道这对你来说有多困难。