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

接上篇文章:https://blog.csdn.net/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


                
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值