Javascript 设置水平滚动上所选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);
    }
};

1
2
...
30

var scroller2=document.getElementById（“scroller2”），
lis=scroller2.getElementsByTagName（“li”），
分区SWIDTH2=lis[0]。偏移网络宽度-20，
电流=0
scroller2.onscroll=函数（）{
所选变量=数学楼层（scroller2.ScrollerLeft/divisionsWidth2）；
如果（当前！==选中）{
lis[当前].className=“”；
lis[selected].className=“selected”；
当前=所选；
$（“#nono2”）.html（lis[current].value）；
}
};

---

请查看Fiddle:

如果您希望始终在屏幕上保持可见的选定内容，您可以更改用于计算选定元素的

分区swidth2

，以使用li项目的平均宽度，而不是仅使用第一个：

---

如果所有的

li

s宽度相等，效果会更好；不知道这对你有多困难。

不幸的是，我也有同样的行为。@ManMann这可能取决于窗口有多宽；您必须不断调整以获得所需的宽度。我不认为这是

-20

，而是

#scroller2

宽度的某个百分比。问题是，我在一个窗口宽度可能不同的web应用程序上使用此代码，因此我担心我使用的代码是错误的。

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