javascript - 有没有什么方法可以使用CSS将滚动条始终保持在底部？

Question

我有一个带有滚动条的容器 div 和其中的一些内容。我把它当作一个小部件来使用。当它初始化时，我将其滚动条放在底部。所以我想要的是无论发生什么(例如，它的父元素发生变化或被移动到另一个地方)，它都可以保持滚动条在底部看到内容。

我知道 JavaScript 可以做到这一点。但是Javascript必须需要一些 Action 来触发一些事件，我希望元素自己制作它。

我认为使用 setInterval 或 setTimeout 会消耗太多资源。

所以我想使用CSS。

有什么想法吗？

Answer 1

如果您想完全禁用滚动，您可以移动 div 的内容，使 div 内容的底部与 div 的底部对齐。

这可以通过这样的事情来完成:

JS

container = document.getElementById("id_of_container");
content = document.getElementById("id_of_content");

function set() {
    content.style.top = String(content.clientHeight - container.clientHeight) + "px";
}

window.onload = set;
window.onresize = set;

set();

CSS

#id_of_content {
    position: relative;
}

#id_of_container {
    overflow-y: hidden;
 }

我上面的示例要求您有一个包含所有内容的容器。除非您使用 setInterval 更改内容父元素的尺寸，否则不需要使用它来执行 set()。

---

如果你想要一个纯 CSS 方法，那么你可以这样做:

#id_of_container {
    padding-top: 100%;
    height: (how ever many you want)px;
    overflow-y: hidden;
}

#id_of_content {
    top: -100%;
    position: relative;
}

不过我不确定这效果如何。