vue实现监听滚动条

// 组件挂载后添加监听事件
mounted () {window.addEventListener('scroll', this.handleScroll)
},
methods: {// 我这里监听的是侧边的滚动条handleScroll: () => {// 滚动时，距离顶部的距离var scrollTop = document.documentElement.scrollTop || document.body.scrollTopvar viewHeight = window.screen.height// 当滚动距离大于屏幕十分之一document.getElementById('rollbar').style.display = scrollTop > viewHeight / 10 ? 'block' : 'none'}
}

vue实现监听滚动条相关推荐

vue @scroll 监听滚动条事件
vue @scroll 监听滚动条事件为啥要使用 @scroll 监听滚动条事件没用在vue.js 开发前我们监听滚动条事件都是在window挂监听事件例如:window.onscroll = ...
Vue全局监听滚动条事件
项目需求滚动条大于200时候,头部固定定位,小于的时候相对定位,监听滚动条事件: // 全局监听,写在App.vue里面methods: {handleScroll(){let scrollTop = ...
vue 中监听document.body.scrollTop 值总为0的解决方法
// 基础资料网页正文全文高: document.body.scrollHeight; 网页被卷去的高: document.body.scrollTop; scrollTop 设置或获取位于对象最顶 ...
Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
vue:监听滚动条事件
由于某些原因,我不得不手工用ant design vue的a-row和a-col拼凑了一个表格,好不容易添加了水平滚动条,然后发现只要拖动滚动条,左表头未设置右边框的问题就被暴露了(为什么没有设置右边 ...
OverlayScrollbars插件监听滚动条的用法
OverlayScrollbars OverlayScrollbars文档 vue 的用法 // 1.安装npm install overlayscrollbars npm install overl ...
vue 中监听并设置scrollTop
vue 中监听并设置scrollTop 问题描述: 目前在做一个项目,父子组件以及兄弟组件中数据调用比较频繁.但是鉴于项目没那么大,就没有使用vuex.直接使用了this.$emit来给父级组件传递参 ...
监听滚动条事件来实现导航栏吸顶效果
首先要实现监听滚动条的位置: (1)在mounted钩子函数中随便定义一个方法来获取滚动条变化: window.addEventListener('scroll', this.handleScroll ...
Vue.js 监听属性简单实例
Vue.js 监听属性 watch,可以通过 watch 来响应数据的变化. watch:用来监听每一个属性的变化 watch这个对象里面都是函数,函数的名称是data中的属性名称,watch ...

vue实现监听滚动条

vue实现监听滚动条相关推荐

最新文章

热门文章