javascript - 带有许多无序列表项的溢出 div 区域

Question

我有一个 div，其中包含一个带有很多 li 的 ul。 div 的高度小于 li 的封面高度，所以我在 div 的 css 上设置了 overflow auto。

示例 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>

CSS

.points-list{
    list-style: none;
    padding: 0;
    margin-top: 0;
}



li.point{

    border-bottom: 1px solid black;
    padding: 0.1em;
}

.points-area{
    overflow: auto;
    height: 20em;
    border: 1px solid black;
}

li.point.selected,
li.point:hover{
    background-color: blue;
}

我有一些 javascript，当用户在 kineticjs 舞台上添加一个圆圈时，下一个 li 被选中(切换选定的类)。

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

}

所以在我的 javascript 代码中添加一个圆圈后，它会在下一个 li 上切换“选定”类名。

我的问题是，因为点数超出了 div 的高度可以处理的范围，所以当我向下移动 li 时，滚动条不会移动。所以例如滚动区域达到 li 文本值 porion。所有 li 的波纹管都没有显示滚动条的原因。当从 Porion Artikulare(切换所选类)更改溢出时，我需要向下滚动一点，以便 li 可以出现在 div 区域上。如何实现？

Answer 1

非常简单。你只需要知道 JS/JQ 中的 'you div height', 'li height', scrolltop 和 scrollto 函数。

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

如果您在 plnkr/JSFiddle 等中有代码。请分享，我可以帮助您