3

我有这个复杂的 HTML 布局：

http://jsfiddle.net/5RgjL/2/

如您所见，消息锚定在#messages容器的顶部。

我想要它，所以它们锚定在底部，所以显示的第一条消息将在底部，而不是在顶部。

此外，在调整页面大小时，滚动框内的视图必须从底部向上滑动。很难解释，我举个例子让你明白：

在框内填充消息，直到填满并且有滚动条。尝试从底部调整整个窗口的大小，您可以看到底部的消息将被覆盖。我不想要这个，而是从底部向上滑动。

我尝试了很多东西，比如绝对定位#message容器，但我遇到了其他问题，我无法让它像我想要的那样工作。

我需要一些真正有 HTML/CSS 经验的人的帮助。

如果你熟悉 Facebook 消息页面，你就会明白我在做什么。

PS：一些 CSS 样式是用 javascript 应用的，因为我动态地生成页面内容，并且只有在这个页面中我才需要这些样式。

4

2 回答 2

0

您可以通过将此样式应用于您的消息 ID 将它们添加到底部：

position: absolute;
bottom: 0;

此外，如果您希望图像添加到列表顶部而不是底部，您可以使用 prependTo() 而不是 appendTo()。

我不确定你在滚动时到底要求什么，所以如果你能提供更多信息，我会更新我的答案。

于 2013-05-13T14:08:05.103 回答
0

如果我理解正确，那么为消息设置绝对底部位置，直到消息多于垂直空间将解决新消息出现在底部的第一个要求。

这需要更改 CSS 和 JavaScript：

CSS

#messagesWrapper {
    position:absolute;
    bottom:0;
}

JavaScript

var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');  

function populateMessages(){
    var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
    i++;
    newMessage.hide().appendTo('#messages').stop().fadeIn(400);

    if ($messages.height() >= $messagePageContent.height()){
        messagesWrapper .css({position:'static'});
        $messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
    }    
}

如果然后调整窗口大小，也需要发生滚动，因此还需要将句柄附加到调整大小事件。

$(window).resize(function() {
    $messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
});

但是，这还不够好，因为缺少高度计算，这会将 CSS 重置position为其默认值。这是enscrolljQuery 插件（我怀疑任何类型的滚动）工作所必需的。

但是我们可以简单地重构并将所有代码移动到一个通用函数中，例如：

var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');  

function populateMessages(){
    var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
    i++;

    newMessage.hide().appendTo('#messages').stop().fadeIn(400);
    scrollMessages();
}

function scrollMessages() {
    if ($messages.height() >= $messagePageContent.height()){
        $messagesWrapper.css({position:'static'});
        $messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
    }
}

$(window).resize(scrollMessages);

这是我在这个演示中使用的代码。这可能不是最好的解决方案，我正在考虑使用-webkit-transform: scaleY(-1)来翻转容器，然后将消息翻转回来，但它弄乱了滚动（即它是向后的！）。使用 CSS 转换可能会有更好的解决方案。

于 2013-05-14T08:34:53.997 回答