vue中实现锚点跳转以及滚动监听跳转到相应标签的方法,供大家参考,具体内容如下
*注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度,不然最后一个元素就滚动不上去,
实际效果图
代码结构
// Html结构 <template> <div> <div class="list"> <ul> <li v-for="(item,index) in title_list" :key="index"> <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'}" @click="jump(index)"> {{item.title}} </span> </li> </ul> </div> <div class="result" @scroll="onScroll" > <div class="scroll-item"><span>第一</span></div> <div class="scroll-item"><span>第二</span></div> <div class="scroll-item"><span>第三</span></div> <div class="scroll-item"><span>第四</span></div> </div> </div> </template>
//功能实现代码 <script> export default { methods:{ jump(index) { var items = document.querySelectorAll(".scroll-item"); for (var i = 0; i < items.length; i++) { if (index === i) { items[i].scrollIntoView({ block: "start",//默认跳转到顶部 behavior: "smooth"//滚动的速度 }); } } }, 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; if (judge) { this.activeStep = i; break; } } }, }, data() { return { activeStep :0, title_list:[ {title:'第一'}, {title:'第二'}, {title:'第三'}, {title:'第四'}, ] } } } </script>
//样式 <style> .list { width: 100%; height: 40px; margin-bottom: 20px; background: pink; } ul { width: 100%; height: 40px; line-height: 40px; list-style: none; } li { float: left; width: 20%; font-size: 30px; } li>span { cursor:pointer; } .result { width: 100%; height: 500px; overflow: scroll; } .scroll-item { width: 100%; height: 500px; margin-top:20px; background: yellow; } .scroll-item>span { font-size: 40px; } .scroll-item:first-child { margin-top: 0; } .scroll-item:last-child { height: 500px; }/ * 最后一个元素的最小高度要大于等于父元素的高度,如果scroll-item为高度自适应的话,那么最后一个scroll-item就得设置min-height:100%* / </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。