vue進入頁面時不在頂部，檢測滾動返回頂部按鈕

 這裏是本小白使用時遇到的問題及我的使用的方法可能並不完美。

1.監測瀏覽器滾動條滾動事件及滾動距離

dmounted() { window.addEventListener("scroll", this.gundong); }, destroyed() { window.removeEventListener("scroll", this.gundong); }, methods: { gundong() { var dis = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(dis > 120){ this.flag = true }else{ this.flag = false } },

通常給window綁定監測事件就能得到window.pageYOffset滾動距離。

 

2.有些時候給body設置了{width:100%,height:100%}，以後就須要將事件綁定在document.body，才能得到document.body.scrollTop滾動距離。

       2.1PC端IE/edge有滾動事件但經過document.body.scrollTop獲取不到數值。

       2.2移動端火狐瀏覽器這樣設置沒問題也能獲取document.body.scrollTop，百度瀏覽器和華爲手機自帶的瀏覽器獲取不到。如下有解決方法

vue進入頁面時不在頂部

  能夠在main.js中寫入如下

router.afterEach((to, from) => { window.scrollTo(0,0); })；

 或者用vue-router中的，須要瀏覽器支持history.pushState

scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }

若是由於須要設置了body{width:100%,height:100%}以上就不適用了

我是將vue最外層的#app-container也設置了{width:100%;height:100%}，若是須要隱藏滾動條這時的樣式，其餘瀏覽器隱藏樣式

html,body,#app-container{ width: 100%; height: 100%; overflow: scroll;} html::-webkit-scrollbar, body::-webkit-scrollbar,#app-container::-webkit-scrollbar{width:0px;height:0px;}

此時能夠在#app-contianer上綁定滾動事件並檢測滾動距離

<div id="app-container"  @scroll="scrollEvent($event)">
 scrollEvent(e) { var dis = e.srcElement.scrollTop; console.log(dis) if (dis > 150) { this.flag = true; } else { this.flag = false; } }

返回頂部按鈕

backTop() { this.$el.scrollTop = 0; }

進入頁面在頂部

var vm = new Vue({ router, store, render: h => h(App) }).$mount("#app"); router.afterEach((to, from) => { vm.$el.scrollTop = 0; });

這樣在PC端和移動端那幾個瀏覽器都能正常運做。

以上是本人遇到和解決的方法。