在template標籤下，定義乙個div標籤:
定義div的樣式，撐起滾動條:
.classname {
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
第一種使用id監聽方法：
將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標籤改寫成:
①在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為你要定位的位置。
如果你的滾動條重新定位需要延遲比較順滑的那種，可以弄個定時器，設定乙個靜態的或動態的滾動速度。
vue中回到頂部
1.回到頂部，使用 scrollintoview 方法 element.scrollintoview方法滾動當前元素，進入瀏覽器的可見區域 該方法可以接受乙個布林值作為引數。如果為true，表示元素的頂部與當前區域的可見部分的頂部對齊 前提是當前區域可滾動 如果為false，表示元素的底部與當前區域...
vue切換頁面滾動條置頂和點選按鈕回到頂部
vue使用的是單頁面路由，所以切換頁面的時候是不會進行重新整理的，這時候就會導致滾動條在切換頁面之後不會自動回到頂部。我們可以使用vue中的router.aftereach這個鉤子來解決這一問題 在main.js中新增如下 就完美解決了 import router from router 引入路由 ...
滾動條定位
首先來乙個例子 this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some text.this is some tex...