vue中监听document.body.scrollTop值总为0的解决方法yw1376394716的博客-

// 基础资料 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 

最近在vuex项目中碰到了这个问题，监听页面滚动时 document.body.scrollTop一直都是0，捣鼓了好久最后找到了几个解决方法

方法一：浏览器兼容有问题

写个兼容方法就行

// chrome || firefox  || IE：   // document.documentElement.scrollTop  document.body.scrollTop  // safari: window.pageYOffset let scrollTop= document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset 

方法二：scrollTop的值只有在app.vue页面才可以获取到

① 使用$refs方法获取页面实例

 mounted(){ var el_ = this.$refs.box;   that.$store.state.el_   = el_; }, 

② 在store.js页面存储app.vue页面实例

import Vue from 'vue' import Vuex from 'vuex' import mutations from "./mutations" import actions from "./actions" import getters from "./getters" Vue.use(Vuex) const state = {     el_:'', // app.vue页面实例 ...... } export default new Vuex.Store({     state,     mutations,     actions,     getters }) 

③ 在需要的页面调用该实例获取或修改scrollTop的值

methods: { scrollTopFun(){ // 获取scrollTop值   console.log(this.$store.state.el_.scrollTop) // 修改scrollTop值 this.$store.state.el_.scrollTop = 500 ; } } 

ok解决完成，亲测有效。