Question

I’m creating a new slider that will integrate with my self written Javascript library. I’m done with the animating part. But was not able to detect, when to stop sliding, i.e on reaching the boundary.

The slider looks like this.

-------------
|           |
| some cont |
| some othr |
| something |
| abcdefghi |
|           |
-------------

Onmouseover the top line(a div bar), the slider moves up and the same for down.
I’m using the technique,

top: -(foo)px;

to move an inner div content.

My question is. How do I get the height of the div based on the content inside it, so that i could know when should I stop reducing the top attribute.

Answer 1

The scrollHeight property is probably what you are looking for.

if (elem.scrollHeight == elem.scrollTop) {
    // bottom
}

if (elem.scrollHeight == elem.scrollBottom) {
    // top
}

if (elem.scrollWidth == elem.scrollRight) {
    // left
}

if (elem.scrollWidth == elem.scrollLeft) {
    // right
}