Question

我正在尝试构建一个跨浏览器工作的聊天UI。我遇到了一个问题，我无法让chat-body div在页面加载时保持滚动到底部，以及添加新消息时。

记录scrollTop div的chat-body时，即使您已滚动，也始终会返回0。所以使用JavaScript似乎是不可能的;无论如何都是首选。

那么如何让这个div保持滚动到底部呢？

Answer 1

在您的演示中，可滚动的div实际上是.chat-content而不是.chat-body。

您必须观看正确div的滚动位置。对于后代，您可以添加在mounted()期间运行的方法：

new Vue({
  el: '#app',

  data: {...},

  mounted() {
    this.stubMessages();
    this.setScrollPos();
    this.watchScroll();
  },

  methods: {
    setScrollPos(){
      var cBody = document.querySelector('.chat-content');
      cBody.scrollTop = 99999999; // arbitrary/calculated value to get to the end of the div
    },

    watchScroll() {
      var cBody = document.querySelector('.chat-content');
      // watch scroll position of content area
      cBody.addEventListener('scroll', function(){
        console.log('scroll', cBody.scrollTop);
      });
    },

    stubMessages() {...},

    addMessage() {...}
  }
});

Answer 2

这里我添加了一个名为scrollDown的方法，用于在添加新邮件时将滚动设置为关闭。我在addMessage()

中调用了该函数

methods: {

scrollDown() {
    var chtbody = document.querySelectorAll('.chat-content')[0];
    chtbody.scrollTop = chtbody.scrollHeight;
  },
  stubMessages() {...
  },

  addMessage() {
    this.messages.push({
      text: this.message,
      time: moment()
    });
    this.scrollDown();
    this.message = '';

  }

}

});

Answer 3

此修复程序是dommmm的答案和thamizhanda的答案的组合。最后的解决方案是添加以下方法，并在addMessage()和mounted()中调用此方法。

scrollToBottom(force) {
  this.$nextTick(function () {
    let chat = document.getElementById('chat');
    let shouldScroll = chat.scrollHeight - chat.clientHeight <= chat.scrollTop + 1;

    if (force || shouldScroll) {
      chat.scrollTop = chat.scrollHeight - chat.clientHeight;
    }
  });
}

Demo

Flexbox Force滚动到底部

3 个答案: