<!--标题-->
<el-tabs
class="mt30"
v-model="tabName"
@tab-click="jump">
<el-tab-pane
v-for="(tab, index) in tabs"
:name="tab.refName"
:key="index"
:label="tab.name"
></el-tab-pane>
</el-tabs>
<!-- 内容 -->
<div
class="scroll-content"
@scroll="onScroll"
:style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height"
>
<!-- 信息0 -->
<div :ref="tabs[0].refName" class="scroll-item mt10">
<el-descriptions title="信息0" :column="2" border>
<el-descriptions-item label="名字" v-for="(item,index) in 20" :key="index">名字</el-descriptions-item>
</el-descriptions>
</div>
<!-- 信息1 -->
<div :ref="tabs[1].refName" class="scroll-item mt20">
<el-descriptions title="信息1" :column="2" border>
<el-descriptions-item label="名字" v-for="(item,index) in 20" :key="index">名字</el-descriptions-item>
</el-descriptions>
</div>
<!-- 信息2 -->
<div :ref="tabs[2].refName" class="scroll-item mt20">
<el-descriptions title="信息2" :column="2" border>
<el-descriptions-item label="名字" v-for="(item,index) in 20" :key="index">名字</el-descriptions-item>
</el-descriptions>
</div>
</div>
tabIndex: '0',
contentStyleObj: {
height: '100px',
},
tabName: 'first',
tabs: [
{
name: '信息0',
refName: 'first',
},
{
name: '信息1',
refName: 'second',
},
{
name: '信息2',
refName: 'third',
},
],
created() {
this.getHight()
window.addEventListener('resize', this.getHight)
},
destroyed() {
window.removeEventListener('resize', this.getHight)
},
methods: {
// tab click
jump(tab, event) {
let target = document.querySelector('.scroll-content')
let scrollItems = document.querySelectorAll('.scroll-item')
// 判断滚动条是否滚动到底部
if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
this.tabIndex = tab.index.toString()
}
let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
let distance = document.querySelector('.scroll-content').scrollTop // 滚动条距离滚动区域顶部的距离
// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
// 滚动动画实现, 使用setTimeout的递归实现平滑滚动,将距离细分为50小段,10ms滚动一次
// 计算每一小段的距离
let step = totalY / 50
if (totalY > distance) {
smoothDown(document.querySelector('.scroll-content'))
} else {
let newTotal = distance - totalY
step = newTotal / 50
smoothUp(document.querySelector('.scroll-content'))
}
// 参数element为滚动区域
function smoothDown(element) {
if (distance < totalY) {
distance += step
element.scrollTop = distance
setTimeout(smoothDown.bind(this, element), 10)
} else {
element.scrollTop = totalY
}
}
// 参数element为滚动区域
function smoothUp(element) {
if (distance > totalY) {
distance -= step
element.scrollTop = distance
setTimeout(smoothUp.bind(this, element), 10)
} else {
element.scrollTop = totalY
}
}
},
// 滚动条滚动
onScroll(e) {
let scrollItems = document.querySelectorAll('.scroll-item')
for (let i = scrollItems.length - 1; i >= 0; i--) {
// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
let judge =
e.target.scrollTop >=
scrollItems[i].offsetTop - scrollItems[0].offsetTop - 150
if (judge) {
this.tabIndex = i.toString()
// 找对应的tab-name值
this.tabName = this.tabs[this.tabIndex].refName
break
}
}
},
getHight() {
this.contentStyleObj.height = window.innerHeight - 450 + 'px'
},
}
若详情弹框中使用,默认每次打开是上一次滚动的位置,想设置每次打开为第一个tab
this.showDialog = true
this.$nextTick(()=>{
this.tabIndex = '0'
this.tabName = this.tabs[this.tabIndex].refName
let element = document.querySelector('.scroll-content')
element.scrollTop = 0
})
测试时出现tab多导致点击最后一个无法定位问题
<div class="scroll-content" @scroll="onScroll" :style="'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height> ... </div>
getHight() { this.contentStyleObj.height = window.innerHeight - 450 + 'px' },
调整高度问题
每个.scroll-item不易过小,若还出现点击错误问题
.scroll-item{ min-height: 200px; margin-bottom: 50px; }
<div ref="scroll" class="scroll-content" @scroll="onScroll" :style=" 'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height"> <div :ref="tabs[0].refName" class="scroll-item mt10">