vue+vux页面滚动定位(支持上下滑动)

本文介绍了在Vue和Vux框架下实现页面滚动定位的解决方案,尤其是在iOS设备上的兼容性问题。作者通过找到定位坐标、监听页面滚动、计算坐标位置以及实现锚点高亮四个步骤,详细讲解了这一过程。文中提到,通过实时监听定位坐标在滚动过程中的变化,并利用getBoundingClientRect()方法获取元素相对视口的位置,可以实现锚点的高亮效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

接上篇文章:https://blog.youkuaiyun.com/honglei_zh/article/details/88898167

在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚点进行页面dom定位,但是这个demo在ios中运行存在兼容性问题,滑动页面时使用position:absolute定位的dom会出现跳动现象,待有时间再解决这个bug。

好了,开始本篇内容部分:

本篇内容是在上篇内容的基础上二次开发而来,实现了双向定位,当页面上下滑动到某个位置时,对应的锚点会出现高亮。看一下运行效果,还阔以吧~

为了把这个问题说清楚,我下面分4个小节分别介绍

1.找到定位坐标

在vue中使用scrollTop这个属性总是失败的很彻底,所以这次压根就不在考虑使用这个玩意儿。我首先在需要滑动的内容区域找到一个定位坐标,这个参考坐标需要满足两点要求:

①这个坐标需要可以在页面中上下滑动

这个坐标需要在滑动的内容区域

②这个坐标需要有个id

通过这个id,在滑动过程中可以实时监听到这个坐标滑动到的位置,当然也可以不是id,只要能得到这个dom就行

我在这个demo中选择的定位坐标是 id="apply1" 的div


                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值