vue 监听滚动高度_vue中监听页面滚动和监听某元素滚动

①监听页面滚动

在生命周期mounted中进行监听滚动：

mounted () {

window.addEventListener('scroll', this.scrollToTop)

},

在方法中定义监听滚动执行的方法：

scrollToTop() {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

console.log(scrollTop)

},

记得在离开当前路由解绑scroll事件

beforeRouteLeave(to, form, next){

window.removeEventListener('scroll',this.scrollToTop);

next();

}

②监听某元素滚动

需要监听的这个元素需要拥有固定的高度

vue组件中：

在方法中定义scrolldiv，是监听class为read-con滚动以后需要执行的方法

scrollEvent () {

let _this = this

let read = _this.$el.querySelector('#read')

console.log(read.scrollToTop)

},

③ 获取各个元素高度

获取具体一个元素的真实高度：

使用scrollHeight的时候,如果scrollHeight小于offsetHeight的时候，高度就是offsetHeight，只有超过offsetHeight的时候才是scrollHeight的高度，不管隐藏不隐藏内容

// 文档高度

let docHeight = document.querySelector('.page').scrollHeight;

获取窗口高度：

// 窗口高度

let winHeight = document.body.offsetHeight;