聊天滚动底部CSS或仅限Javascript

时间：2018-02-15 20:50:57

标签： javascript html css chat

请帮我解决这个问题。我在这里附上我的部分代码。这是一个聊天，默认情况下我需要滚动到底部，当新消息进入时它应该移动其余部分。

.inner-chat-info {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  margin-bottom: 10px;
  padding-top: 10px;
}
.chat-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #2581bd;
}

.chat-user-data {
  margin-left: 12px;
}
.dialog-text {
  font-weight: 100;
  font-size: 16px;
}
.message-date {
  color: #bbbbbb;
  font-weight: 100;
}
.dialog {
  padding: 0 40px;
  height: 350px;
  overflow-y: scroll;
}

.send-msb-btn {
  margin-right: 10px;
}
<div class="dialog">
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name">Hello hello </span>  
                  <span class="message-date">сHello hello :17</span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/leonardo.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello </span>  
                  <span class="message-date">9:20</span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello  </span>  
                  <span class="message-date">10:20 </span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/leonardo.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello  </span>  
                  <span class="message-date">Hello hello </span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello и </span>  
                  <span class="message-date">Hello hello </span>
                <div class="dialog-text">
                  Hello hello 
                </div>
                </div>
              </div>
              <div class="inner-chat-info">
                <div class="chat-user-photo">
                  <img class="" src="./assets/images/users/tom.png" alt="">
                </div>
                <div class="chat-user-data">
                  <span class="chat-user-name"> Hello hello  </span>  
                  <span class="message-date">Hello hello </span>
                <div class="dialog-text">
                  :)
                </div>
                </div>
              </div>
            </div>

我自己尝试实现它，但没有得到它。我用scrollTop和scrollHeight尝试了所有这些答案，但它没有用。请尽可能帮助我纠正我的代码。谢谢！

2 个答案:

答案 0 :(得分：0)

我用jquery做了这个，因为它用一个代码来解决你的问题。

首先我们得到窗口的高度

$(window).height()

然后我们可以定位该高度并应用scrollTop函数，窗口高度为值

$('.dialog').scrollTop(heightValue);

您可以添加一个按钮来克隆消息并将其插入底部。这个监听器为页面高度变量增加了100个变量，因此它总是会到达底部。我在获取消息的确切高度时遇到了一些问题。

我尝试使用outerHeight()，但最终它已经深入到底。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;
＆＃13; 
var pageHeight = $('.dialog').height();

$('.dialog').scrollTop(pageHeight);


//Function to fake new message
$('button').click(function() {
  $('#clone').clone().appendTo('.dialog');
  pageHeight = pageHeight + 100;
  $('.dialog').scrollTop(pageHeight);
})
＆＃13; 
.inner-chat-info {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  margin-bottom: 10px;
  padding-top: 10px;
}

.chat-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #2581bd;
}

.chat-user-data {
  margin-left: 12px;
}

.dialog-text {
  font-weight: 100;
  font-size: 16px;
}

.message-date {
  color: #bbbbbb;
  font-weight: 100;
}

.dialog {
  padding: 0 40px;
  height: 350px;
  overflow-y: scroll;
}

.send-msb-btn {
  margin-right: 10px;
}

button {
  position: fixed;
  top: 5vh;
  left: 5vw;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dialog">
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name">Hello hello </span>
      <span class="message-date">сHello hello :17</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello </span>
      <span class="message-date">9:20</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">10:20 </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello и </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <div id='clone' class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>

  <button>New Message</button>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这是使用纯js的解决方案。每当像本例中添加新消息时，您都可以调用updateScroll()（来自https://stackoverflow.com/a/18614545/1309377），或者保持间隔为秒或其他内容。

element.scrollTop = element.scrollHeight;会将对话框的滚动设置为div的总高度，从而使滚动条保持在底部。

document.getElementById("addMessage").addEventListener("click", addMessage);

function addMessage() {
  var chatInfo = document.getElementsByClassName("inner-chat-info")[0].outerHTML;
  var dialog = document.getElementsByClassName("dialog")[0];
  var currMsgs = dialog.innerHTML;
  dialog.innerHTML = currMsgs += chatInfo;
  updateScroll();
}

function updateScroll() {
  var element = document.getElementsByClassName("dialog")[0];
  element.scrollTop = element.scrollHeight;
}
.inner-chat-info {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  margin-bottom: 10px;
  padding-top: 10px;
}

.chat-user-name {
  font-size: 16px;
  font-weight: bold;
  color: #2581bd;
}

.chat-user-data {
  margin-left: 12px;
}

.dialog-text {
  font-weight: 100;
  font-size: 16px;
}

.message-date {
  color: #bbbbbb;
  font-weight: 100;
}

.dialog {
  padding: 0 40px;
  height: 350px;
  overflow-y: scroll;
}

.send-msb-btn {
  margin-right: 10px;
}
<button id="addMessage">Add message</button>
<div class="dialog">
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name">Hello hello </span>
      <span class="message-date">сHello hello :17</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello </span>
      <span class="message-date">9:20</span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">10:20 </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/leonardo.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello и </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        Hello hello
      </div>
    </div>
  </div>
  <div class="inner-chat-info">
    <div class="chat-user-photo">
      <img class="" src="./assets/images/users/tom.png" alt="">
    </div>
    <div class="chat-user-data">
      <span class="chat-user-name"> Hello hello  </span>
      <span class="message-date">Hello hello </span>
      <div class="dialog-text">
        :)
      </div>
    </div>
  </div>
</div>

相关问题
最新问题