javascript - 滚动到底部不起作用

Question

需要帮助，为什么我的滚动条在这个示例上不起作用我不知道为什么..使用代码一切正常。但是更新css滚动顶部不起作用。:(我应该怎么做才能解决这个问题？是我的css样式引起的问题吗？我使用了这个，但它不会在div的底部滚动..

$(document).ready(function() {
    alert('scroll must happen');
    $('#message_container').scrollTop($('#message_container')[0].scrollHeight);
    $('.topbox').html('just sample');
});

score 0 · Accepted Answer

没有可见的滚动发生，因为您尝试滚动的元素没有溢出；都显示出来了。滚动条用于<body>元素，而不是<div>您要滚动的元素。

#message_container如果你给出一个高度，你可以让它工作，例如

#message_container {height:100px;}

或者，使用绝对定位技巧，例如在这个演示中。（最初的“撤消”CSS，我用它来保持代码简短。见 MDN）

#container, #head, #body, #foot{
    position: absolute;
    top:0;left:0;right:0;bottom:0;
}
#head {
    bottom: initial;
    height:50px;
}
/* position so it get's your desired size*/
#body {
    top:50px;
    bottom:50px;
    overflow-y: scroll;
}
#foot {
    top: initial;
    height:50px;
}

score 0 · Accepted Answer

你必须设置两件事：

div 溢出，
一些高度，甚至是百分之一（使其更灵活）。

如果您根本没有设置任何高度，则 div 将展开，然后没有可滚动的内容，在这种情况下，您获得的唯一滚动条是文档本身（正文）。

我在您的 CSS 中添加了一个高度和溢出属性，现在它可以按预期工作了。

jsFiddle

添加的CSS：

#message_container {
 overflow-y:auto;
 overflow-x:hidden;
 height:300px;
}

javascript - 滚动到底部不起作用

2 回答 2

Related

Reference