vue滚动条监听，定位，回到顶部

在template标签下，定义一个div标签:<div class='className'></div>

定义div的样式，撑起滚动条:

.className {

height: 100%;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

overflow: auto;

}

现在已经有了滚动条，在上面已经撑起滚动条的情况下，监听滚动条我这里选择两种方式，个人比较推荐第二种方式：

第一种使用id监听方法：

将div标签改写成:<div class='className' id='yourId'></div>

在mounted函数中：document.getElementById('yourId').addEventListener('scroll', this.handleScroll);

这里你也可以使用window.addEventListener('scroll', this.handleScroll, true);监听。

在methods中:handleScroll() {

console.log(document.getElementById('yourId').scrollTop);

console.log(document.getElementById('yourId').scrollHeight);

}

现在滚动鼠标就会打印出滚动条位置了，

如果想要设置滚动条的位置，直接使用document.getElementById('yourId').scrollTop = value;value为你要滚动条到的位置，比如回到顶部的写法:document.getElementById('yourId').scrollTop = 0;，如此关于滚动条的操作也就完事了，但在vue中使用document并不是太好，因为别人会说你都用vue了，还在用原生的document。

第二种使用ref监听

将div标签改写成:<div class='className' ref='yourName' @scroll="functionName($event)"></div>

①在mounted函数中:你仍然可以使用window.addEventListener('scroll', this.handleScroll, true);监听，然后在methods中写handleScroll进行打印或操作；

②你也可以在methods中写入div中的方法，依靠标签内的@scroll=functionName($event)监听:

functionName(e) {

console.log(this.$refs.yourName.scrollTop);

console.log(this.$refs.yourName.scrollHeight);

}

重新给滚动条定位使用this.$refs.yourName.scrollTop = value;即可,value为你要定位的位置。

如果你的滚动条重新定位需要延迟比较顺滑的那种，可以弄个定时器，设置一个静态的或动态的滚动速度。