與消息在底部的消息的聊天系統

我正在嘗試構建一個簡單的聊天系統，就像Facebook使用Messenger，保持新消息在底部。但他們添加頁眉和保持固定位置白衣的最後一條消息，當然滾動條與消息在底部的消息的聊天系統

Here is my try... but no scrollbar and the header do not move too.

記住，我不希望有一個固定的頭。我之前讀過的問題是聊天室中的「height：auto」會使其「流動」，但這是保持聊天高度動態的原因。好吧......如果有人有一個更好的解決方案來保持消息在底部，頭部在頂部，當消息到達頭部時變得粘稠，請。

PS: With only the ccs3 display:flex, I been able to achieve my goal here.. very simple.. It's possible without ? even with JS'

來源

2017-04-06 Ricardo Gomes

喲，看看這個

(function(i) { 
 
    $(".click").click(function() { 
 

 
    if (parseInt($(".chat .placeholder").css("margin-bottom")) > 32) { 
 
     $(".chat .placeholder").css("margin-bottom", "-=50px"); 
 
    } 
 

 
    else if ($(".chat .placeholder").css("margin-bottom") == "32px") { 
 
     $(".chat .placeholder").css("margin-bottom", "0px"); 
 
    } 
 

 
    $(".chat").append("<p>hey " + (++i) + "</p>"); 
 
    
 
    $(".chat").scrollTop($(".chat").prop('scrollHeight') - $(".chat").outerHeight()); 
 

 
    }) 
 
})(0);

.main .chat { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 30px; 
 
    background: red; 
 
    box-sizing: border-box; 
 
    height: 200px; 
 
    overflow: auto; 
 
} 
 

 
.chat p { 
 
    background: blue; 
 
    padding: 16px 20px; 
 
    margin: 0; 
 
} 
 

 
.main .header { 
 
    position: relative; 
 
    background: yellow; 
 
    height: 18px; 
 
} 
 

 
p.placeholder { 
 
    width: 100%; 
 
    padding: 0; 
 
    margin-top: 0; 
 
    margin-bottom: 132px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='button' class='click' value='add'> 
 
<div class='main'> 
 

 
    <div class='chat'> 
 
    <p class="placeholder header">Header</p> 
 
    <p>hello</p> 
 
    </div> 
 
</div>

來源

2017-04-06 16:24:39 user31782

謝謝t他回答說，但z-索引只能使「標題」在其他divs「絕對||相關」和像固定div一樣的行爲上可見。我想聊天divs擴展並將頁眉擴展出屏幕，創建一個滾動條主要div在底部保留新消息。完全像Facebook一樣。 –

@RicardoGomes檢查編輯。 – user31782

這裏還是一樣的。頭固定。我可以用display：flex ..但是我只需要用css2 ..檢查flex版本https://jsfiddle.net/cLtkt0sw/。謝謝 –

現在我明白你的問題是：

剛剛從.chat

刪除 position: absolute;

來源

2017-04-06 16:37:50 StefanBob

感謝您的回答，是的..但這不是問題。我希望頭在外面..長得像.chat擴展不在標題之上。 –

重複我的答案。忘記Z指數的東西 – StefanBob

然後消息將保持在頂部和新的將低於舊的。和頭部它是固定的。這裏我的目標是底層的新消息，歷史增長到頂端，當達到頭時，它會使消息更加粘滯。當然還有滾動條。一個！如果可能的話，沒有javascript！我只是發現了「顯示：彎曲」..如果沒有這個新的ccs3的東西..更好。謝謝 –

與消息在底部的消息的聊天系統

回答

相關問題