vue监听页面滚动事件

方法：监听滚动实现

通过addEventListener方式监听
通过scroll获取到滚动

export default {
	data () {
		return {
			topNavBg: {
        		backgroundColor: ''
      		}
		}
	},
	// 滚动监听
	mounted () {
    	window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    },
    methods: {
		// 获取页面滚动距离
	    handleScroll () {
	        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	        console.log(scrollTop, '滚动距离')
	    }
	},
	// 滚动重置
    	beforeDestroy () {
      		window.removeEventListener('scroll', this.handleScroll)
    	},
}

问题：监听不到页面的滚动

现象：上述方法不可用，handleScroll只触发一次，且scrollTop为0
原因：html,body的height设置有问题，因为限制了根元素高度，故而无法监听到滚动

// oldCode: 原代码css中
body,html {
  width: 100%;
  height: 100vh; /或者 height: 100%
}
// newCode：新代码改为
body,html {
  width: 100%;
  min-height: 100vh; /或者 min-height: 100% ; 不需要也可以去除
}