Javascript 使用Vue.js滚动到div的底部

我有一个Vue组件，其中包含几个元素。我想在调用组件中的方法时自动滚动到该元素的底部（基本上，与中的操作相同）。但是，我还没有找到在我的组件中获取元素并修改

scrolTop

---

在您发布的相关问题中，我目前正在使用Vue 2.0.8，我们已经有了一种用普通javascript实现这一点的方法，因此我们只需要获取要滚动的dom节点的js引用

可用于声明对html元素的引用，以使它们在vue的组件方法中可用

---

或者，如果组件中的

方法是某个UI事件的处理程序，并且目标与要在空间中滚动的div相关，那么您可以简单地使用所需的参数，像我所理解的那样滚动
滚动（event.target.nextSibling）
，您想要的效果是在发生某些事情（例如：列表中添加了一个项目）时滚动到列表（或可滚动div）的末尾。如果是这样，您可以仅使用纯Javascript和VueJS选择器滚动到容器元素（甚至它自己的页面）的末尾

var container = this.$el.querySelector("#container");
container.scrollTop = container.scrollHeight;

我在这个提琴中提供了一个工作示例：

每次将项目添加到列表中时，列表都会滚动到末尾以显示新项目

希望这对您有所帮助。
我尝试了公认的解决方案，但对我无效。我使用浏览器调试器，发现应该使用的实际高度是
clientHeight
，但是您必须将其放入
updated（）
钩子中，整个解决方案才能工作

data(){
return {
  conversation: [
    {
    }
  ]
 },
mounted(){
 EventBus.$on('msg-ctr--push-msg-in-conversation', textMsg => {
  this.conversation.push(textMsg)
  // Didn't work doing scroll here
 })
},
updated(){              <=== PUT IT HERE !!
  var elem = this.$el
  elem.scrollTop = elem.clientHeight;
},

data（）{
返回{
对话：[
{
}
]
},
安装的（）{
EventBus.$on（'msg-ctr--在对话中推送消息'，textMsg=>{
this.conversation.push（textMsg）
//没有在这里做卷轴
})
},
updated（）{下面是一个使用#ref滚动到div底部的简单示例


/*
在某处定义：
var vueContent=新的Vue({
el:“#vue内容”，
...
*/
var messageDisplay=vueContent.$refs.messageDisplay；
messageDisplay.scrollTop=messageDisplay.scrollHeight；

{{message}}
我在我的应用程序中也有同样的需求（具有复杂的嵌套组件结构），不幸的是，我没有成功地让它工作

最后我用了它，效果很好！
2021简单易读，不会伤害你的大脑……使用
el.scrollIntoView（）

这个解决方案不会伤害你的大脑，因为你需要考虑
scrollTop
或
scrollHeight
，它内置了平滑的滚动，甚至可以在IE中工作

有一些选项，您可以像
scrollIntoView（{behavior:'smooth'}）
一样传递它以获得平滑滚动

methods: {
  scrollToElement() {
    const el = this.$refs.scrollToMe;

    if (el) {
      // Use el.scrollIntoView() to instantly scroll to the element
      el.scrollIntoView({behavior: 'smooth'});
    }
  }
}

然后，如果您想在页面加载时滚动到此元素，可以如下调用此方法：

mounted() {
  this.scrollToElement();
}

否则，如果您想通过单击按钮或其他操作滚动到它，您可以用相同的方式调用它：

<button @click="scrollToElement">scroll to me</button>

滚动到我这里

卷轴可以一直工作到IE 8。在IE或Safari中，平滑卷轴效果无法在开箱即用。如果需要，评论中会提到as@mostafaznv

使用DOM元素上的ref属性进行引用
确保使用正确的CSS
如果需要支持IE11和（旧）Edge，可以使用：

scrollToBottom() {
    let element = document.getElementById("yourID");
    element.scrollIntoView(false);
}

如果您不需要支持IE11，那么以下代码将起作用（更清晰的代码）：

解决方案不适用于我，但以下代码适用于我。我正在使用
消息框类处理动态项

scrollToEnd() {
            setTimeout(() => {
                this.$el
                    .getElementsByClassName("message-box")
                    [
                        this.$el.getElementsByClassName("message-box").length -
                            1
                    ].scrollIntoView();
            }, 50);
        }

请记住将该方法放入
mounted（）
not
created（）
，并将class
消息框添加到动态项中。

setTimeout（）
对于这项功能非常重要。有关这方面的详细信息，您可以参考。
对于那些没有找到上述有效解决方案的人，我相信我有一个有效的解决方案。我的具体使用案例是，每当向阵列中添加新消息时，我想滚动到特定div的底部（在我的示例中是聊天盒）

const container = this.$el.querySelector('#messagesCardContent');
        this.$nextTick(() => {
          // DOM updated
          container.scrollTop = container.scrollHeight;
        });

我必须使用nextTick，因为我们需要等待dom从数据更改中更新，然后再进行滚动

我只是将上述代码放在messages数组的观察程序中，如下所示：

messages: {
      handler() {
        // this scrolls the messages to the bottom on loading data
        const container = this.$el.querySelector('#messagesCard');
        this.$nextTick(() => {
          // DOM updated
          container.scrollTop = container.scrollHeight;
        });
      },
      deep: true,
    }, 

这就是我的工作

this.$nextTick(() => {
   let scrollHeight = this.$refs.messages.scrollHeight
   window.scrollTo(0, scrollHeight)
})

我发现这个选项似乎工作得很好，但是，在设置滚动之后，就会呈现div中的字符串（我正在用相同的方法更新字符串和滚动）。在vue？vue.nextTick（function（）{}）更新文本之后，有没有办法更改滚动位置等待下一次更新。对我来说效果很好。这是一个很好的解决方案，但使用组件的任何操作都会触发更新挂钩，并且在每次更新时都会滚动到底部。谢谢，我对接受的答案也有相同的问题。您的答案也为我解决了问题。：）更好的方法是将其放入相关的watcher方法中，作为（或已经等待）的
$nextTick（）的回调
。这将产生相同的效果，但可能需要更少的资源。对于所有使用NUXT:的用户，您必须在页面上放置
scrollToTop:false
，以便它在更改路由之间工作，而不是
此操作。$el.querySelector
您还可以通过使用该机制选择所需的div来获得所需的div。如果没有解决方案有效，也许你应该谷歌$nextTick（）。你必须等待内容完全绘制后再滚动。（检查阿尔佩什的答案）对于使用NUXT的每个人：你必须在页面上放置
scrollToTop:false
，以便它在更改之间工作routes@GeorgeAbitbol裁判更像是最后的手段（黑客），依赖它们会导致动态组件出现问题：例如，$refs对象不是被动的，因此随着组件的添加和删除，它会继续增长。它不应该滚动到我而不是滚动到我。记住@
scrollToEnd() {
            setTimeout(() => {
                this.$el
                    .getElementsByClassName("message-box")
                    [
                        this.$el.getElementsByClassName("message-box").length -
                            1
                    ].scrollIntoView();
            }, 50);
        }

const container = this.$el.querySelector('#messagesCardContent');
        this.$nextTick(() => {
          // DOM updated
          container.scrollTop = container.scrollHeight;
        });

messages: {
      handler() {
        // this scrolls the messages to the bottom on loading data
        const container = this.$el.querySelector('#messagesCard');
        this.$nextTick(() => {
          // DOM updated
          container.scrollTop = container.scrollHeight;
        });
      },
      deep: true,
    }, 

this.$nextTick(() => {
   let scrollHeight = this.$refs.messages.scrollHeight
   window.scrollTo(0, scrollHeight)
})