粘贴或固定覆盖到可滚动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.