Vue中监听页面滚动 ||无法获取页面位置

最新推荐文章于 2023-10-10 09:46:57 发布
最新推荐文章于 2023-10-10 09:46:57 发布
阅读量270 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086982/article/details/113346574
版权

监听页面滚动

通过一些生命周期中的挂载全局监听事件，或者使用自带的方法两条路

无法获取页面位置

本质上就是Css中出现的overflow属性修改了scroll状态，无法获取

南乡人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue页面固定滚动位置的处理办法
08-30
本篇文章主要介绍了解决Vue固定滚动位置的处理办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue页面切换时滚动条会记录之前的位置
qq_41801484的博客
11-18 1516
前言 该问题最终是由页面过渡导致的，没有使用过渡效果的小伙伴应该是有其他原因，加油吧。。。。。 问题描述 A页面下拉到距离页面顶部200px位置处，然后切换到B页面， 结果滚动条依然在距离顶部200px处。 将在A页面的滚动条位置记录了下来。 寻找问题思路 因为在逻辑上并没有对页面做滚动行为相关的处理，所以首先排除业务代码的嫌疑， 那么问题很有可能就是在直接处理页面切换时造成的，暂时先将vue的过渡取消试一下 取消vue的过渡后 页面果然没有这个问题了，那么定位到了问题，这个问题就已经被修复了百分之五十了，
【VUE】elementUI table表格 列错位/滑动后切换每页显示数后错位/表格使用fixed后错位
SZnAl的博客
08-15 2869
table表格右侧列固定后，在切换页面之后，就会出现列错误的现象。2.添加actived 并调用methods里的方法。此方法为elementUI官方方法，可参考。3.在methods添加方法。1.给表格添加ref。
【vue】elementui组件el-dropdown在页面滚动后定位问题修正
最新发布
yanglijuan_81的博客
10-10 403
elementui组件el-dropdown在页面滚动后定位会向上跑偏，在本地运行时没有问题，在打包后会出现这个问题，修正如下：
触摸屏怎么禁止浏览器窗口的缩放
qq_39306005的博客
07-08 1666
最近项目跑到了触碰屏上，双指可放大缩小页面。。。 在css中添加样式 *{ touch-action:none; } 使用语法 touch-action 属性可以被指定为: 任何一个关键字 auto、none、manipulation，或 零或任何一个关键字 pan-x、pan-left、pan-right，加零或任何一个关键字 pan-y、pan-up、pan-down，加可选关键字 pinch-zoom auto 当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平
vue中赋值的坑：vue
ProHc的博客
04-28 167
this.$set(x,i,y) 向x 中第i个位置传送y 值 传的是地址 当x 变了 y 也会跟着改变 x.push 是一个栈 如果不清空 会一直叠加 =赋值一样会使其相互影响变化 如果想一个值变化，另一个值改变 先JSON.stringify( ) 后 JSON.parse( ） this.data_category_[j][i] = JSON.parse(JSON.stringify(this.data_category[j].data[flg])); concat()用于连接两个
vue页面设置滚动失败的解决方案(scrollTop一直为0),vue页面无法滚动
李十三的博客
03-09 3666
这就涉及到一个知识点的误区: "让页面滚动到指定位置这个需求,不一定是让整个window滚动,在路由嵌套的vue页面中,window可能始终是没有滚动的,产生滚动条的是一个设置了固定高度,且子元素的高度超出了他本身的元素. 这时候,元素才会产生滚动条,而你一股脑的给window设置滚动条位置,window也蒙了"可是发现给某个div设置该属性后，一致为0。怎么看我这个方法适不适合你,你可以尝试打印滚动条的位置,页面滚动后,再次打印滚动条的位置,如果一直为0的话,那我的的这个方法就可以解决你遇到的问题.
Vue监听页面区域scroll滚动条方法，实现区域内某元素吸顶效果
XINGZI前端程序猿的博客
10-11 4532
Vue监听区域滚动条事件，实现简易元素吸顶效果
事件监听 & 页面滚动（页面滚动到某一位置时显示/隐藏某元素，Vue环境）
热门推荐
商务合作 | 共同学习 | 携手共进
04-13 10万+
通过监听页面滚动事件，实现当页面滑动到某一位置时显示或隐藏某一元素，附知识点详细讲解。
vue3监听页面滚轮
豆奶的博客
04-25 3028
实现滚轮滚动，左侧导航栏动态固定定位，且相应高亮对应的正文内容。 解决监听scroll的坑
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
主要介绍了vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法,结合实例形式分析了@scroll监听滚动事件无效问题的原因及相应的解决方法,需要的朋友可以参考下
vue监听滚动事件实现滚动监听
11-26
在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
vue返回上一页面时回到原先滚动的位置的方法
10-17
主要介绍了vue返回上一页面时回到原先滚动的位置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue页面跳转后返回原页面初始位置方法
08-28
下面小编就为大家分享一篇vue页面跳转后返回原页面初始位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue在App.vue文件中监听路由变化刷新页面操作
10-14
主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VsCode 配置 Java Web开发环境
南乡人的博客
09-26 1万+
基本环境 Java sdk maven (编译打包构建工具，用来生成一个web项目) 安装maven教程 安装完成后，需要重启一下（可能restart当前命令行窗口也可以），环境才能生效 tomcat（代理服务器） 如果你下在的tomcat的是免安装版的话，在启动的时候会出现双击startup.bat闪退的现象 解决方案 前期准备 打开 maven 的安装目录/conf/sett...
Vue 注释template中组件的属性
南乡人的博客
12-23 6089
想注释一个组件的属性，一直报错 [vue/no-parsing-error] Parsing error: unexpected-character-in-attribute-name 因为项目中引入了eslint-plugin-vue，对template有默认检测，因此就直接修改.eslintrc.js文件 "unexpected-character-in-attribute-name"...
JS sort函数（按照首字母字符排序）
南乡人的博客
08-08 5148
直接调用sort的排序是按照首字母的大小来从小到大进行排列的 var myArry = ['b', 'c' ,'a'] console.log(myArry.sort()) // [ 'a', 'b', 'c' ] var myArry = ['1', '3' ,'2'] console.log(myArry.sort()) // [ '1', '2', '3' ] var myAr...
ElementUI 修改组件默认属性
南乡人的博客
12-24 5065
项目引入element-ui后，有时需要对组件的属性进行全局修改。比如input默认不开启清空按钮，我们需要让他变成默认开启，不然还需要一个个的手动修改。 import Vue from 'vue' import ElementUI from 'element-ui'; // 修改input组件默认有清空按钮 ElementUI.Input.props.clearable.default=tru...
vue 监听页面滚动 实现元素吸顶或者固定位置
09-07
在Vue中实现元素吸顶或固定位置的方式是通过监听页面滚动事件并动态改变元素的样式或位置。具体步骤如下： 1. 在Vue的组件中，通过`mounted`钩子函数监听页面滚动事件： ``` mounted() { window.addEventListener('scroll', this.handleScroll); } ``` 2. 在`methods`中定义`handleScroll`方法来处理滚动事件，并使用`scrollTop`属性获取页面滚动位置： ``` methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来决定元素的样式或位置 // ... } } ``` 3. 在模板中，使用动态绑定的方式来设置元素的样式或位置。可以通过绑定CSS类名或行内样式实现，以下是两种常见的实现示例： - 使用CSS类名： 在data中定义一个`isFixed`变量，根据滚动位置的条件来切换`isFixed`的值，在模板中绑定CSS类名根据`isFixed`的值设置元素的样式： ``` data() { return { isFixed: false, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置isFixed为true，否则为false this.isFixed = scrollTop > 100; }, }, ``` 在模板中绑定CSS类名，并设置元素的样式： ``` <div :class="{ 'fixed': isFixed }">固定的元素</div> <style> .fixed { position: fixed; top: 0; left: 0; } </style> ``` - 使用行内样式： 直接通过绑定`style`属性来设置元素的样式： ``` data() { return { topPosition: 0, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件，如果满足条件则设置topPosition为固定的位置，否则为0 this.topPosition = scrollTop > 100 ? '100px' : '0'; }, }, ``` 在模板中绑定行内样式： ``` <div :style="{ top: topPosition }">固定的元素</div> ``` 通过以上步骤就可以实现元素吸顶或固定位置的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值