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 固定模式 boolean true
bounds 锚点区域边界 number 5
getContainer 指定滚动的容器 () => HTMLElement () => window
getCurrentAnchor 自定义高亮的锚点 () => string -
offsetTop 距离窗口顶部达到指定偏移量后触发 number
showInkInFixed affix={false} 时是否显示小圆点 boolean false
targetOffset 锚点滚动偏移量,默认与 offsetTop 相同,例子 number -
onChange 监听锚点链接改变 (currentActiveLink: string) => void -
onClick click 事件的 handler function(e: Event, link: Object) -

你可能感兴趣的:(React,javascript,react.js,前端)