随便写的demo
右侧的字母导航随着左侧的数据移动
<template>
<div>
<div class="letter-container">
<div id="scroll_content" class="letter-content">
<div v-for="(item,index) in letters" :id="'letter_'+item" :key="index" class="letter-block">{
{
item }}</div>
</div>
<div class="letter-guide">
<p v-for="(item,index) in letters" :key="index" :class="cur_letter==item?'active':''" @click="selectLetter(item)">{
{
item }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
cur_letter: 'A',
letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'X', 'Y', 'Z'],
allContents: null,
offsetTopArr: []
}
},
methods: {
listerScroll () {
document.getElementById('scroll_content').addEventListener('scroll', () => {
const height = document.getElementById('scroll_content').scrollTop
this.offsetTopArr.forEach(item => {
if (height > item.offsetTop) {
this.cur_letter = item.innerText
}
})
})
},
selectLetter (val) {
this.cur_letter = val
document.getElementById('letter_' + val).scrollIntoView(true)
}
},
mounted () {
this.$nextTick(() => {
this.allContents = document.querySelectorAll('.letter-block')
this.allContents.forEach(item => {
this.offsetTopArr.push({
offsetTop: item.offsetTop, innerText: item.innerText })
})
this.listerScroll()
})
}
}
</script>
<style lang="scss" scoped>
.letter-container{
position: relative;width: 380px;
}
.letter-content{
height: 400px;
overflow: auto;
}
.letter-block{
height: 50px;
}
.letter-guide{
width: 30px;position: absolute;
top: 20px;
right: 20px;
p{
font-size: 14px;
margin: 0; text-align: center;cursor: pointer;
}
p:hover{
color: dimgrey;
}
}
.active{
background: burlywood;
border-radius: 20px;
}
</style>
使用position:sticky实现顶吸效果:
https://segmentfault.com/a/1190000017998387