js实现页面滚动时自动切换Tab标签,点击标签自动滚动页面

文章介绍了如何实现点击Tab标签时页面自动滚动到对应位置,以及在页面滑动时自动切换Tab标签的功能。通过使用scrollIntoView()方法和监听滚动事件,结合getBoundingClientRect().top来判断元素位置,实现了元素定位和平滑滚动的效果。同时,文章提到在监听页面滚动时需要注意元素的选择,可能是整个窗口或特定元素内部的滚动。

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

        这个功能主要分为两步,第一步是点击Tab标签的同时,页面自动滚动到对应位置,这个实现起来比较简单,代码如下:

        这里只要获取到对象后直接使用scrollIntoView()就可以了,其中behavior: "instant"代表直接跳转到相应位置,而smooth代表平滑滑动过去,个人认为smooth用起来用户体验会比较好一点,但是也有一定缺点,具体情况具体分析吧。

        第二步就是随着页面滑动,自动切换Tab标签栏,这边要考虑到是整个页面的滑动还是页面中一个元素内部的页面滑动,整个页面的话就把获取到的元素换成window就可以,我这边主要贴一下部分元素内部的滑动吧,因为当时自己做的时候也是用window弄了好久发现根本监听不到页面滚动,具体代码如下:

        首先要打开监听事件:

        监听事件代码如下:

        我这边的tabbarList就是tab标签列表,这个for循环必须倒着来。getBoundingClientRect().top这个函数主要是用来帮助我们获取元素顶部到视口顶部的距离,这样就可以实现标题所说的功能了。

         最后要销毁监听事件:

 

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值