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為你要定位的位置。

如果你的滾動條重新定位需要延遲比較順滑的那種，可以弄個定時器，設定一個靜态的或動态的滾動速度。