粘贴或固定覆盖到可滚动div- JavaScript的可视区域
粘贴或固定覆盖到可滚动div- JavaScript的可视区域
提问于 2018-10-07 08:07:45
我有一个聊天框的代码，可以滚动在其中添加消息。我必须显示它的覆盖，不应该滚动与消息，它应该停留在消息，如果滚动聊天框，它滚动到底部添加消息。
<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 -->在chatbox中添加新消息时，我使用这行js使其滚动到底部的最新消息。
let objDiv = document.getElementById("chat-area");
objDiv.scrollTop = objDiv.scrollHeight;我已经尝试了固定位置来覆盖它会让它消失..如果有JS或CSS的解决方案，请告诉我。非常感谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-07 08: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52684375
复制相关文章
相似问题