效果图
这是css的代码
body {
margin: 0;
}
.linkage {
width: 100vw;
height: 100vh;
display: flex;
.linkage-button {
width: 20vw;
height: 100vh;
background: rgb(10, 253, 233);
text-align: center;
font-size: 40px;
color: #fff;
overflow: scroll;
scroll-behavior: smooth;
.linkage-button-list {
width: 20vw;
// scroll-behavior:smooth
.linkage-button-item.ac {
background: lightblue;
}
.linkage-button-item {
scroll-behavior: smooth;
width: 20vw;
height: 10vh;
line-height: 10vh;
}
}
}
.linkage-content {
width: 80vw;
height: 100vh;
scroll-behavior: smooth;
overflow: scroll;
.linkage-content-list {
.linkage-content-item {
position: sticky;
top: 0;
width: 80vw;
height: 100vh;
.linkage-content-title {
height: 6vh;
line-height: 6vh;
width: 80vw;
text-align: center;
background: rgb(68, 0, 255);
color: #fff;
font-size: 30px;
}
}
}
}
}
.linkage-button::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.linkage-content::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
这是js的代码
import { Component } from 'react'
import './linkage.less'
class LinkAge extends Component {
constructor(...args) {
super(...args);
this.state = {
LeftButton: [],
RightList:[],
Active:0
}
this.ButtonList=[]
this.ContentList=[]
this.ScrollBys= true
this.ContTop=[0]
}
FnSetButton(n) {
for (var i = 0; i < n; i++) {
this.ButtonList.push({
id: `按钮${i}`,
text: `按钮${i}`,
});
}
// console.log(this.state.LeftButton)
}
componentDidMount() {
this.FnSetButton(19)
this.FnSetContent(19)
this.setState({
LeftButton: this.ButtonList,
RightList: this.ContentList
});
}
FnSetContent(n) {
let ContTop = 0; //第一个元素距离页面顶部的距离
let Random = this.FnSetRandom(1400, 750);
for (let i = 0; i < n; i++) {
this.ContentList.push({
height: Random,
id: `内容${i}`,
text: `内容${i}`,
top: ContTop,
});
ContTop += Random;
}
}
FnSetRandom(m, n) {
return parseInt(Math.random() * (m - n) + n);
}
FnClick(index,ev){
this.ScrollBys = false;
this.setState({
Active:index
})
this.refs["linkage-content"].scrollTop = this.ContentList[index].top;
this.ow = ev.target.parentNode.parentNode.offsetHeight / 2
console.log( ev.target )
this.top = ev.target.offsetTop - this.ow + ev.target.offsetHeight / 2;
ev.target.parentNode.parentNode.scrollTo({
top: this.top,
});
}
FnScroll() {
this.leftHeight =this.refs["linkage-button-list"].querySelector(".linkage-button-item").offsetHeight;
// var scrollTop = this.$refs[""].scrollTop;
this.ContTop = this.refs["linkage-content"].scrollTop;
if (this.ScrollBys) {
let n = 0;
for (let i = 0; i < this.ContentList.length; i++) {
if (
this.refs["linkage-content"].scrollTop >= this.ContentList[i].top
) {
//盒子滚动的距离如果大于右边盒子里的元素距离页面顶部的距离
// 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
// if (
// scrollTop >= offsetTop - headerHeight &&
// scrollTop <= offsetTop - headerHeight + scrollHeight
// )
// if (i > 4) {
// this.refs["linkage-button"].scrollTop = (i - 4) * this.leftHeight;
// }
// if (i <= 1) {
// this.refs["linkage-button"].scrollTop = 0;
// }
n = i;
console.log(this.leftHeight)
}
}
this.setState({
Active : n
})
}
if (this.ContTop == this.ContentList[this.state.Active].top) {
this.ScrollBys = true;
}
this.current = Math.ceil((this.refs['linkage-button'].clientHeight) / this.refs['linkage-button-list'].querySelector('.linkage-button-item').offsetHeight / 2)-0.5
if (this.state.Active > this.current) {//center当前变化的值,current,中间的那个值
this.refs['linkage-button'].scrollTop = this.refs['linkage-button-list'].querySelector('.linkage-button-item').offsetHeight * (this.state.Active - this.current)
} else {
this.refs['linkage-button'].scrollTop = 0
}
}
render() {
return (<div>
<div className="linkage">
<div className="linkage-button" ref="linkage-button">
<div className="linkage-button-list" ref="linkage-button-list">
{this.state.LeftButton.map((item,index) => (
<div onClick={this.FnClick.bind(this,index)} className={this.state.Active ===index?"linkage-button-item ac":"linkage-button-item"} key={item.id}>
{item.text}
</div>))
}
</div>
</div>
<div className="linkage-content" ref="linkage-content" onScroll={this.FnScroll.bind(this)} >
<div className="linkage-content-list" >
{this.state.RightList.map((item) => (
<div key={item.id} style={{height:item.height}} className="linkage-content-item">
<div className="linkage-content-title">{ item.text }</div>
</div>
))
}
</div>
</div>
</div>
</div>)
}
}
export default LinkAge
复制就可以用了