overflow div area with many unordered list items

Question

I have a div that contains a ul with a lot of li's. The div's height is smaller than the height the li's cover so I have overflow auto on the css for div.

sample 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;
}

I have some javascript that when something user adds a circle on a kineticjs stage the next li gets selected (toggled selected class).

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

}

so in my javascript code after a circle is added it toggles the 'selected' class name on the next li.

My problem is that because points are more than div's hieght can handle, the scrollbar doesnt move when I move down the li's. So eg scroll area reaches as far as li with text value porion. All li's bellow that are not shown cause of scrollbar. I need when changing from Porion Artikulare (toggling selected class) the overflow to scroll down a bit so that the li can appear on the div area. How can this be achieved?

Answer 1

It is very simple. all you need to know is 'you div height', 'li height', scrolltop and scrollto functions in JS / JQ.

calculate the scrollTop using number of li's u need to scroll, and use scrollTo inorder to scroll to particular position on scroll bar!!

if you have your codes in plnkr / JSFiddle etc.. please share it, i can help you with it

Answer 2

I think I got it! This is the updated fiddle

I added this piece of code

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

Then I just checked to see if the li i am selecting is inside the scroll area and if its not move the scroll area as much ase needed. If the scroll area is allready lower and it can be shown don't do nothing (in case user manually used the scrollbar)

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

}

I think it works as I want to.