Allow scrolling until last element

Question

I have a div with some element inside it and I would like to allow the scrolling of the div until the last element.

This is what happens when I scroll:

And this is how I would like to make it:

Is it possible to do it?

Answer 1

Well, it is quite simple without any javascript:

HTML:

<div>
    <section>hello</section>
    <section>hello</section>
    <section>hello</section>
    <section>hello</section>
    <section>hello</section>
    <section>hello</section>
    <section>hello</section>
</div>

CSS:

section { height: 100px; }

section:last-child { height: 100%; }

div {
    overflow: scroll;
    height: 400px;
    border: 1px solid black;
}

See fiddle. The concept is just to use the parent div height as a height for the last item.

Answer 2

Try achieve this using JS. Set a bottom margin to a last category equal to wrapper height minus last category height.

var wrapperHeight = $("#wrapper").innerHeight();
var lastCategory = $(".category:last-child");
var lastCategoryHeight = lastCategory.height();
var bottomMargin = wrapperHeight - lastCategoryHeight;
lastCategory.css({margin: "0 0 "+bottomMargin+"px 0"});

DEMO