时间戳

首页 > 解决方案 > 粘性或固定覆盖到可滚动 div-JavaScript 的可见区域

javascript - 粘性或固定覆盖到可滚动 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 中有解决方案，请告诉我。非常感谢

标签： javascripthtmlcssscrolloverlay

解决方案

像这样的东西？

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>

推荐阅读