Question

我有一个聊天框的代码，可以在其中添加消息时滚动。我必须在上面显示一个叠加层，该叠加层不应该与消息一起向上滚动，如果滚动聊天框，则在添加消息时滚动到底部，它应该停留在消息上方。

<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中是否有解决方案。非常感谢

Answer 1

像这样吗？

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-JavaScript的可见区域

1 个答案: