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.scrollTopconsole.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% ; 不需要也可以去除
}

vue监听页面滚动事件相关推荐

vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
html屏幕滚动事件监听,JQuery监听页面滚动事件
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var scrollTop = $(window).scrollTop(); 2.获取指定元素的页面位置: $(obj).offset().top; ...
vue 监听div滚动事件
使用场景,列表下拉刷新数据: <div class="table-box" @scroll="divscrollFn($event)"> </ ...
监听页面滚动触发事件，页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...
html监听页面滚动高度,jquery如何监听滚动条事件？
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
vue监听页面上的报错信息,window.onerror和window.addEventListener(‘error‘)的区别
前言: 监听页面上的报错信息项目中使用:判断路径上有没有这个版本号...具体内容可根据实际情况来 const asyncVersion = '20210128' window.addEventLis ...
php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
实例元素滚动时执行 JavaScript 定义和用法 onscroll 事件在元素滚动条在滚动时触发. 提示: 使用 CSS overflow 样式属性来创建元素的滚动条. 浏览器支持语法 HTM ...
VUE监听页面刷新和关闭事件
背景:公司有一个数据看板,,需求是要统计看板有多少人看过,,每个人停留的曝光时间使用技术:目前使用的技术是后端Springboot 权限用的是SpringSecurity,前端页面是 Vue+El ...
html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题
问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个 ...

vue监听页面滚动事件

方法：监听滚动实现

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

vue监听页面滚动事件相关推荐

最新文章

热门文章