场景
React页面中，不确定有多少个需要定位的块，根据元素块的个数，生成对应数量的锚点，点击锚点后页面滚动到指定的块。 页面滚动到指定的块，对应的锚点高亮。
锚点
超链接的一种形式，快速定位到想要看的位置，常用在文章目录等位置。
实现
- dom元素方面
// dom
<div
id="know-detail-body"
onScrollCapture={() => this.onScrollEvent()}
style={{ height: '200px', overflowY: 'scroll' }}
ref={(c) => {
this.scrollRef = c;
}}
>
<div className="content">
<div id="content-div">
{contentOptions}
</div>
</div>
<div className="anchor-link-body" id="know-link-anchor">
<div className="link-content-link">
<span />
</div>
<div id="link-contentKey">
{LinkOptions}
</div>
</div>
</div>
- 构造对象，动态生成元素，对象从接口获取，数目不定，这是个demo
/*
ObjectList:[
{id: 1, name: '橘子'}，
{id: 2, name: '苹果'},
{id: 3, name: '香蕉'}，
{id: 4, name: '菠萝'}，
]
*/
// 根据数组生成对应的模块, 在render函数内面
const contentOptions = [];
const LinkOptions = [];
ObjectList.forEach((item) => {
LinkOptions.push(<div id={`link-${item.id}`} className="link-content" onClick={this.scrollToAnchor.bind(this, item.id)}>{item.name}</div>)
contentOptions .push(
<div className="content-child">
<span id={`${item.id}`}>{item.name}</span>
<div style={{ width: '100%', heigth: '500px' }}>
我是内容，我是内容
</div>
</div>
)
});
- 点击锚点，对于的块滑动到浏览器窗口的顶部方法
// 这是滚动方法
scrollToAnchor = (anchorName) => {
if (anchorName || anchorName === 0) {
// 找到锚点
const anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在，就跳转到锚点
if (anchorElement) {
anchorElement.scrollIntoView({
block: 'start',
behavior: 'smooth',
});
}
}
};
- 生命周期函数中获取所有元素的id集合
componentDidMount() {
this.getBoxIds();
}
/**
* 1. 在React生命周期函数中执行函数
* 2. 获取每个块的正文内容初始距离浏览器边框的距离 offsetTop
*/
getBoxIds = () => {
// 正文板块绑定的id数组
const linkIds = [];
ObjectList.forEach((item, index) => {
const top = document.getElementById(`${item.id}`);
if (top) {
linkIds.push({ key: item.id, offsetTop: top.getBoundingClientRect().top});
}
})
this.setState({ linkIds });
};
- 监听页面滚动，操作dom，使导航的锚点高亮
/**
* activeLink -- 高亮的类名，属性在css中自行设置
* linkIds -- 锚点对应div id集合的数组
* this.scrollRef.scrollTop 滚动条滚动的距离
*/
onScrollEvent() {
const { linkIds } = this.state;
linkIds.forEach((item, index) => {
if (this.scrollRef.scrollTop > item.offsetTop) {
document.getElementById(`link-${item.key}`).classList.add('activeLink');
linkIds.forEach((k, v) => {
if (item.key !== k.key) {
document.getElementById(`link-${k.key}`).classList.remove('activeLink');
}
});
}
});
}
github地址
demo项目：
- npm install
- npm start
https://github.com/fyxwanan/author-demo
