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) | - |
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfhefb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01