vue中监听页面滚动和监听某元素滚动
vue中监听页面滚动和监听某元素滚动①监听页面滚动在生命周期mounted中进行监听滚动:mounted () {window.addEventListener('scroll', this.scrollToTop)},在方法中定义监听滚动执行的方法:scrollToTop() {var scrollTop = window.pageYOffset || document.documentElem
·
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组件中:
<div class="read-con" @scroll="scrollEvent" >
</div>
在方法中定义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;
更多推荐
已为社区贡献60条内容
所有评论(0)