antd的Anchor锚点组件为什么没有随着页面滚动变化?

原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了!

之前自己使用antd组件库的Anchor组件时遇到了一个问题,就是按照官方文档的用法配置组件之后发现我的Anchor锚点组件的锚点Title位置没办法随着我的页面滚动而变化。

但是点击Title跳转具体锚定位置的功能却是没有问题的

经过网上的一些资料搜索以及自己对API的实践,最终找到了问题所在,这里的Anchor组件有一个target属性,需要修改该属性来修改Anchor组件监听的滚动区域,默认情况下是监听body的滚动

但是恰恰我们的业务场景下body是不滚动的而是Anchor的父组件进行滚动,所以其实我们可以尝试重新定义target属性来解决:

<Content id="wy-anchor-Content">

<Anchor>

{ anchorList.map(item => (

<Link key={`${item.index}${item.next}`}

href={`#anchor-${item.index}${item.next}`}

title={item.title ? item.title : '默认信息'} />

))

}

</Anchor>

</Content>

尝试修改之后:

<Content id="wy-anchor-Content">

<Anchor target={() => document.getElementById('wy-anchor-Content')}>

{ anchorList.map(item => (

<Link key={`${item.index}${item.next}`}

href={`#anchor-${item.index}${item.next}`}

title={item.title ? item.title : '默认信息'} />

))

}

</Anchor>

</Content>

不过后面去看了下官方的文档,发现似乎目前版本并没有target属性,目前支持的API包括,可能是因为新版本已经不支持了吧,不过试了下还是有用的:

affix固定模式booleantrue
bounds锚点区域边界number5
getContainer指定滚动的容器() => HTMLElement() => window
getCurrentAnchor自定义高亮的锚点() => string-
offsetTop距离窗口顶部达到指定偏移量后触发number
showInkInFixedaffix={false} 时是否显示小圆点booleanfalse
targetOffset锚点滚动偏移量,默认与 offsetTop 相同,例子number-
onChange监听锚点链接改变(currentActiveLink: string) => void-
onClickclick 事件的 handlerfunction(e: Event, link: Object)-
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值