允许滚动直到最后一个元素

Question

我有一个div，里面有一些元素，我想允许滚动div直到最后一个元素。

滚动时会发生这种情况：

这就是我想要的方式：

有可能吗？

Answer 1

嗯，没有任何 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;
}

见fiddle。这个概念只是使用父div高度作为最后一项的高度。

Answer 2

尝试使用JS实现此目的。将底部边距设置为最后一个类别，等于包装器高度减去最后一个类别高度。

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

Answer 3

也可以使用scrollIntoView，通过滚动查看最后一个元素，这是JS片段：

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

这是is the jsfiddle code