如何用Vue实现锚点跳转和滚动监听功能？

本文共计644个文字，预计阅读时间需要3分钟。

在Vue中实现滚动监听跳转及滚动到对应标签的方法，以下是一个简化的示例：

javascript {{ item.title }}

.scroll-container { overflow-y: auto; max-height: 300px; /* 限制滚动区域高度 */}

*注意：* - 确保每个标签都有一个唯一的ID，例如使用`id=scroll-item-0`、`id=scroll-item-1`等。- 确保滚动容器有最大高度限制，例如`max-height: 300px;`，以便触发滚动效果。- 如果最后一个元素的滚动高度小于滚动区域的高度，则可能需要调整计算方式，确保滚动到正确的位置。

vue中实现锚点跳转以及滚动监听跳转到相应标签的方法，供大家参考，具体内容如下

*注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度，不然最后一个元素就滚动不上去，

scrollIntoView接口的具体参数说明

实际效果图

代码结构

// 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。