有許多無序列表項的div區域溢出

Question

我的div包含一個帶有很多li的ul。 div的高度小於li的封面高度，因此我在div的CSS上自動溢出了。

樣本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，當某些用戶在dynamicjs舞台上添加一個圓時，下一個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。 未顯示的所有li的波紋管都是滾動條的原因。 我需要從Porion Artikulare（切換選定的類）更改溢出時向下滾動一點，以便li可以顯示在div區域上。 如何做到這一點？

Answer 1

這很簡單。 您只需要知道JS / JQ中的“ you div height”，“ li height”，scrolltop和scrollto函數即可。

用li需要滾動的個數計算scrollTop，並使用scrollTo滾動到滾動條上的特定位置！

如果您的代碼在plnkr / JSFiddle等中，請分享。我可以為您提供幫助

Answer 2

我想我明白了！ 這是更新的小提琴

我添加了這段代碼

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

然后我只是檢查一下我選擇的位置是否在滾動區域內，以及它是否沒有移動滾動區域。 如果滾動區域已經降低並且可以顯示，則什么也不做（以防用戶手動使用滾動條）

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

}

我認為它可以按我的意願工作。