Question

我有一个div包含一个带有很多li的ul。 div的高度小于li的封面高度所以我在css上为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>

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上的“selected”类名。

我的问题是因为积分超过div的高度可以处理，当我向下移动时，滚动条不会移动。例如滚动区域与文本值porion一样到达li。所有li的下方都没有显示滚动条的原因。我需要从Porion Artikulare（切换选定的类）更改溢出以向下滚动一点，以便li可以出现在div区域。如何实现这一目标？

Answer 1

很简单。所有你需要知道的是你在JS / JQ中划分高度＆＃39;，＆＃39; li height＆＃39;，scrolltop和scrollto函数。

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

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

Answer 2

我想我明白了！这是更新的fiddle

我添加了这段代码

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

}

我认为它可以按照我的意愿行事。

溢出div区域，包含许多无序列表项

2 个答案: