Липкое или фиксированное наложение на видимую область прокручиваемого div- JavaScript - PullRequest
Новая
       19

Липкое или фиксированное наложение на видимую область прокручиваемого div- JavaScript

0 голосов
/ 07 октября 2018

У меня есть этот код для окна чата, которое прокручивает при добавлении сообщений в нем.Я должен показать наложение на нем, которое не должно прокручиваться вверх с сообщениями, оно должно оставаться над сообщениями, если прокручивать окно чата, оно прокручивается до дна при добавлении сообщений. 

<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 Ответ

0 голосов
/ 07 октября 2018

как то так? 

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>
...