<template>
<div class="demo">
<div style="height: 100px"></div>
<div style="height: 71px" ref="tabContainer">
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane name="111" label="111"></el-tab-pane>
<el-tab-pane name="222" label="222"></el-tab-pane>
<el-tab-pane name="333" label="333"></el-tab-pane>
<el-tab-pane name="444" label="444"></el-tab-pane>
<el-tab-pane name="555" label="555"></el-tab-pane>
<el-tab-pane name="666" label="666"></el-tab-pane>
<el-tab-pane name="777" label="777"></el-tab-pane>
</el-tabs>
</div>
<div class="child-container" ref="container" id="container">
<div class="scroll" id="scrollContainer">
<div class="child div1" id="111" ref="111">111</div>
<div class="child div2" id="222" ref="222">222</div>
<div class="child div3" id="333" ref="333">333</div>
<div class="child div4" id="444" ref="444">444</div>
<div class="child div5" id="555" ref="555">555</div>
<div class="child div6" id="666" ref="666">666</div>
<div class="child div7" id="777" ref="777">777</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeName: "111",
};
},
mounted() {
document.querySelector("#container").addEventListener("scroll", this.handleScroll, true);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleClick() {
const container = document.querySelector("#container");
const topLine = this.$refs.tabContainer.getBoundingClientRect().bottom;
const tabPositionY = this.$refs[this.activeName].getBoundingClientRect().y;
const distance = tabPositionY - topLine + container.scrollTop;
container.scrollTop = distance;
},
handleScroll() {
const scroll = document.querySelector("#scrollContainer");
const topLine = this.$refs.tabContainer.getBoundingClientRect().bottom;
scroll.querySelectorAll(".child").forEach((item) => {
if (item.getBoundingClientRect().y <= topLine && item.getBoundingClientRect().y > 0) {
this.activeName = item.id;
}
});
},
},
};
</script>
<style lang="scss">
.demo {
width: 100%;
height: 100vh;
overflow: auto;
position: relative;
.child-container {
height: calc(100vh - 71px - 100px);
overflow-y: auto;
}
.child {
height: 300px;
}
.div1 {
background: #fff;
}
.div2 {
background: #eee;
}
.div3 {
background: #fff;
}
.div4 {
background: #fff;
}
.div5 {
background: #fff;
}
.div6 {
background: #ccc;
}
.div7 {
background: #fff;
}
}
</style>