CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MeV
MeV

Reputation: 3958

Allow scrolling until last element

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: enter image description here

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

Is it possible to do it?

Upvotes: 5

Views: 3543

Answers (3)

Eduard Florinescu
Eduard Florinescu

Reputation: 17511

Also it can be done with scrollIntoView, by scrolling into view the last element, this is the JS snippet:

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

And this is the jsfiddle code

Upvotes: 0

smnbbrv
smnbbrv

Reputation: 24531

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.

Upvotes: 10

phts
phts

Reputation: 3915

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

Upvotes: 4

Related Questions