粘貼或固定覆蓋到可滾動div-JavaScript的可見區域
[英]Sticky or fixed overlay to visible area of scrollable div- JavaScript
問題描述
我有一個聊天框的代碼，可以在其中添加消息時滾動。 我必須在其上顯示一個覆蓋層，該覆蓋層不應該與消息一起向上滾動，如果滾動添加消息時滾動至底部的聊天框，它應該停留在消息上方。
<style>
#overlay {
display: none;
width:100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
z-index: 2;
cursor: pointer;
position: absolute;
bottom: 0;
}
.chat-area {
background-color:#f3f3f3;
height: 75px;
overflow-y:auto;
position:relative
}
<style>
<div class="chat-area" id="chat-area">
<div id="overlay">
<div class="warning">Registro requerido para chatear
<a href="http://trackstuff.net/path/out.php" target="_blank">Regístrate ahora</a></div>
</div><!-- overlay -->
<div class='row chat-entered'>
<div class='isTyping'><a href="http://trackstuff.net/path/out.php" class="is-typing-link">SexySlut22</a> está escribiendo......</div>
</div>
</div><!-- chat-area -->
在聊天框中添加新消息時，我正在使用這行js使其滾動到底部的最新消息。
let objDiv = document.getElementById("chat-area");
objDiv.scrollTop = objDiv.scrollHeight;
我嘗試過固定位置使其覆蓋它。.請讓我知道JS或CSS中是否有解決方案。 非常感謝
1 個解決方案
解決方案1
2 已采納 2018-10-07 00:34:09
這樣的東西？
setInterval(function(){ let messages = document.getElementById('messages'); messages.innerHTML = messages.innerHTML + '<div class="row chat-entered">' + '<div class="isTyping"><a href="#" class="is-typing-link">Username</a>:' + Math.random() + '</div>' + '</div>'; let objDiv = document.getElementById("messages"); objDiv.scrollTop = objDiv.scrollHeight; }, 400);
#overlay { width:100%; height:100%; background-color: rgba(0,0,0,0.5); z-index: 2; cursor: pointer; position: absolute; bottom: 0; color:white; } #overlay a { color:white; text-decoration: underline; } .warning { position: absolute; top:50%; left:0 transform:translate3d(-50%, 0, 0); text-align:center; width:100%; display:block; } .chat-area { display: block; background-color:#f3f3f3; position: relative } #messages { overflow:hidden; height:200px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="chat-area" id="chat-area"> <div id="overlay"> <div class="warning">Registro requerido para chatear <a target="_blank">Regístrate ahora</a></div> </div><!-- overlay --> <div id="messages"> <div class='row chat-entered'> <div class='isTyping'><a href="#" class="is-typing-link">Username</a> está escribiendo......</div> </div> </div><!-- messages --> </div><!-- chat-area --> </body> </html>
重疊式div / chrome中的問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.