挠曲箱力卷至底

Question

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

在为scrollTop div记录chat-body时，即使滚动，它也总是返回0。因此，使用JavaScript似乎是不可能的；无论如何，这是首选的。

我怎么才能让这个div一直滚动到底部呢？

演示

Answer 1

修复是多姆的答案和萨米桑达的答案的组合，最后的解决方案是添加以下方法，并在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;
    }
  });
}

演示

Answer 2

从您的演示中，可滚动的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 3

在这里，我添加了一个名为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 = '';

  }

}

});