Geek Answers Handbook

Allow scrolling to last item

I have a div with some element inside it, and I would like to allow the div to scroll to the last element.

Here's what happens when I scroll: enter image description here

And here is how I would like to do this: enter image description here

Is it possible to do this?

+4
source share
3 answers

Well, this is pretty 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 only to use the parent height of the div as the height for the last element.

+7
source

Try this with JS. Set the bottom margin to the last category equal to the height of the wrapper minus the height of the last category.

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

+4
source

scrollIntoView , JS:

items = document.querySelectorAll("section");i = items[items.length-1];i.scrollIntoView();

- jsfiddle

0

More articles:


All Articles