[JavaScript知识库]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包括，可能是因为新版本已经不支持了吧，不过试了下还是有用的：