有没有办法保持滚动条始终在底部使用css

Is there any way to keep scrollbar always at bottom using css?

本文关键字：底部 css 滚动条 有没有      更新时间：2023-09-26

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

我知道Javascript可以做到。但是Javascript必须需要一些动作来触发一些事件，我想让元素自己做。

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

所以我想用CSS。

任何想法?

如果您想完全禁用滚动，您可以移动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;
}

我不确定这会有多好。

我找到了一个非常巧妙的解决方案:http://davidwalsh.name/detect-node-insertion

所以我让外部元素的animation属性设置为css3

keyframes elementChanged
{
    from {opacity: 1};
    to   {opacity: 1};
}
myOuterElement
{
    animation: elementChanged
}

然后我将animationEnd事件绑定到我的元素，所以无论Dom树结构与我的元素相关发生什么，我都可以有一个回调并做我想做的事情。

下面是javascript代码: 
document.getElementById('elementId').addEventListener('animationEnd', function()
{
    // do something I like...
}, false);

要始终在底部显示滚动条，您可以使用overflow-x: scroll;作为CSS属性。我不明白为什么对父元素的更改会破坏这种行为。如果你想知道更多，请发布你的代码，这样我们就可以看到发生了什么。

相关文章：