Javascript 具有许多无序列表项的div区域溢出

我有一个div，包含一个ul和很多li。div的高度小于li的封面高度，因此我在css for div上有自动溢出功能

示例html

<div class="points-area">
    <ul class="points-list">
        <li class="point selected" id="startPoint">Start</li>
        <li class="point" id="endPoint">End</li>
        <li class="point" id="N">Nasion</li>
        <li class="point" id="S">Stella center</li>
        <li class="point" id="P">Porion</li>
        <li class="point" id="ar">Artikulare</li>
        <li class="point" id="T1">T1</li>
        <li class="point" id="Me">Me</li>
        <li class="point" id="Gn">Gnathion</li>
        <li class="point" id="T2/MT1">T2/MT1</li>
    </ul>
</div>

我有一些javascript，当用户在kineticjs舞台上添加一个圆圈时，下一个li被选中并切换到selected类

if (! $("li.point.selected").is(":last-child")){
        prevLi = $("li.point.selected");
        prevLi.next().toggleClass('selected');
        prevLi.toggleClass('selected');
        toBeAdded = prevLi.next();

}

因此，在我的javascript代码中，添加一个圆圈后，它会在下一个li上切换“selected”类名

我的问题是，因为点数超出了div的hight所能处理的范围，所以当我向下移动li时，滚动条不会移动。例如

---

使用文本值porion，滚动区域最远可达li。所有未显示的李的吼叫都是滚动条的原因。我需要从Porion Artikulare切换选定类时，将溢出向下滚动一点，以便li可以显示在div区域。这是如何实现的？

这很简单。您只需要知道JS/JQ中的“youdivheight”、“li height”、scrolltop和scrollto函数

使用需要滚动的li的u的数量计算scrollTop，并使用scrollTo滚动到滚动条上的特定位置

---

如果您的代码是plnkr/JSFIDLE等。。请分享一下，我可以帮你

我想我明白了！这是最新的

我添加了这段代码

var divHeight, liHeight, lisPerScrollPage;
divHeight = $(".points-area").height(); //caluclate divs height
liHeight = $("li.point").outerHeight(true);// calculate li's height with padding margin etc
lisPerScrollPage = parseInt(divHeight / liHeight); //calculate how many li's fits a scroll page

然后，我只是检查我选择的li是否在滚动区域内，如果没有，请根据需要移动滚动区域。如果滚动区域已准备就绪且可以显示，则在用户手动使用滚动条的情况下，不要执行任何操作

index = $("li.point").index(toBeAdded) + 1;
if ($(".points-area").scrollTop() < liHeight *(index - lisPerScrollPage))
{
    $(".points-area").scrollTop(liHeight *(index - lisPerScrollPage));

}

---

我想这是我想要的

这是我目前为止所做的，但没有达到预期效果。嘿，它工作得很好。当我观察JSFIDLE时，它看起来很好。单击“下一步”时，滚动条相对于列表项移动！！

index = $("li.point").index(toBeAdded) + 1;
if ($(".points-area").scrollTop() < liHeight *(index - lisPerScrollPage))
{
    $(".points-area").scrollTop(liHeight *(index - lisPerScrollPage));

}