<template>
<div>
<el-select v-model="sysID" filterable placeholder="请选择" @change="chooseSys">
<el-option v-for="item in sysList" :key="item.id" :label="item.room_name" :value="item.id">
</el-option>
</el-select>
</div>
<!-- scroll view -->
<div class="listBox">
<div class="listItem" v-for="(item, index) in sysList">
<div> {{ item.room_name }}</div>
</div>
</div>
</template>
<script>
chooseSys() {
this.sysList.map((a, ia) => {
if (this.sysID == a.id) {
this.jump(ia)
return
}
})
},
jump(index) {
let target = document.querySelector('.listBox')
let scrollItems = document.querySelectorAll('.listItem')
// 判断滚动条是否滚动到底部
if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
this.activeStep = index
}
let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
let distance = document.querySelector('.listBox').scrollTop // 滚动条距离滚动区域顶部的距离
// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 浏览器兼容 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
// 滚动动画实现, 使用setTimeout的递归实现平滑滚动,将距离细分为50小段,10ms滚动一次
// 计算每一小段的距离
let step = total / 50
if (total > distance) {
smoothDown(document.querySelector('.listBox'))
} else {
let newTotal = distance - total
step = newTotal / 50
smoothUp(document.querySelector('.listBox'))
}
// 参数element为滚动区域
function smoothDown(element) {
if (distance < total) {
distance += step
element.scrollTop = distance
setTimeout(smoothDown.bind(this, element), 10)
} else {
element.scrollTop = total
}
}
// 参数element为滚动区域
function smoothUp(element) {
if (distance > total) {
distance -= step
element.scrollTop = distance
setTimeout(smoothUp.bind(this, element), 10)
} else {
element.scrollTop = total
}
}
},
</script>
vue scrollview 锚点
于 2024-03-18 10:23:26 首次发布
![](https://img-home.csdnimg.cn/images/20240611030827.png)