美文网首页
ant-design-vue anchor组件源码解析

ant-design-vue anchor组件源码解析

作者: wu_9f41 | 来源:发表于2021-04-06 16:28 被阅读0次
  1. 点击link的click事件
    handleScrollTo-> 滚动的距离是:scrollY+eleOffsetTop-(targetOffst/offsetTop)
    即:
    Window.scrollY+ele.getBoundingClientRect().top-ele.ownerDocument.documentElement.clientTop-(targetOffst/offsetTop)

点击link的时候 元素太往上了。 想要距离顶部的菜单栏对齐
scrollY+eleOffsetTop-(targetOffst/offsetTop)
可以修改targetOffst/offsetTop
即:
Ele.距离文档顶部间距-(targetOffst/offsetTop)

2.滚动 link的激活事件
handleScroll->getCurrentActiveLink

Links.push( )->条件是:
ele.getBoundingClientRect().top-container.getBoundingClientRect().top<(targetOffst/offsetTop)+bounds
取最后的一个link

滚动的时候 滚动到底部 最后一个link没有激活
ele.getBoundingClientRect().top-container.getBoundingClientRect().top<(targetOffst/offsetTop)+bounds
可以修改targetOffst/offsetTop和bounds

Ele.距离视口窗口顶部间距<(targetOffst/offsetTop)+bounds

相关文章

网友评论

      本文标题:ant-design-vue anchor组件源码解析

      本文链接:https://www.haomeiwen.com/subject/iwzskltx.html