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滚动距离。

vue进入页面时不在顶部

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

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端和移动端那几个浏览器都能正常运作。

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

来源：博客园

作者：阿伊呀伊

链接：https://www.cnblogs.com/ayyay/p/11759902.html

标签

vue

软件

scrolltop