Question

我有一个带滚动条的容器div，里面有一些内容。我正在使用它像一个小部件。初始化时，我将其滚动条放在底部。所以我想要的是无论发生什么（例如它的父元素改变或被移动到另一个地方），它可以保持滚动条在底部以查看内容。

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

我认为使用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;
}

我不确定这会有多好用。

Answer 2

我在这里找到了一个非常棘手的解决方案：http://davidwalsh.name/detect-node-insertion

所以我让我的外部元素具有css3

的animation属性

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);

Answer 3

要始终在底部显示滚动条，您只需使用overflow-x: scroll;作为CSS属性即可。我无法理解为什么更改父元素会破坏此行为。如果您想了解更多信息，请发布您的代码，以便我们了解具体情况。

有没有办法让滚动条始终在底部使用CSS？

3 个答案: