vue+element ui实现锚点定位

本文实例为大家分享了vue + element ui 实现锚点定位的具体代码，供大家参考，具体内容如下

vue

<el-row :gutter='20'> <el-col :span='3'> <!--导航选择事件--> <el-menu :default-active='activeStep' @select='jump'> <el-menu-item v-for='(item,index) in menuData' :index='`${index}`' :key='item.subjectId'> <i class='el-icon-menu'></i> <span slot='title'>{{item.subjectName}}</span> </el-menu-item> </el-menu> </el-col> <!--绑定scroll事件需要监听--> <el-col :span='21' @scroll='onScroll'> <div v-for='(item,index) in tableObject' :key='index' style='height:500px'> <div :id='item.name'>{{item.name}}</div> <el-table :data='item.rows' :key='index'> <el-table-column label='序号' type='index' width='50'></el-table-column> <el-table-column prop='channelId' label='渠道/团队id'></el-table-column> <el-table-column prop='channelName' label='渠道/团队'></el-table-column> <el-table-column prop='ruleCode' label='分配方案id'></el-table-column> <el-table-column prop='ruleName' label='分配方案名称'></el-table-column> <el-table-column prop='ruleVersion' label='版本号'></el-table-column> <el-table-column prop='hierarchy' label='级别'> <template slot-scope='scope'><span>{{scope.row.hierarchy == 1 ? ’项目’ : ’渠道团队’}}</span> </template> </el-table-column> <el-table-column label='有效期'> <template slot-scope='scope'><span>{{scope.row.beginTime + ’-’ + scope.row.endTime}}</span> </template> </el-table-column> <el-table-column prop='creatorName' label='操作人'></el-table-column> <el-table-column prop='createTime' label='操作时间'></el-table-column> <el-table-column prop='orderCnt' label='关联订单'> <template slot-scope='scope'><el-button @click='orderHandleClick(scope.row.orderCnt)' type='text' size='small'>{{scope.row.orderCnt}}</el-button> </template> </el-table-column> <el-table-column label='操作'> <template slot-scope='scope'><el-button @click='settingHandleClick(scope.row)' type='text' size='small'>设置分配方案</el-button> </template> </el-table-column> </el-table> <el-pagination v-if='item.total > 5' size='small' @size-change='handleSizeChange($event,index)' @current-change='handleCurrentChange($event,index)' :current-page='ruleForm.ageNum' :page-sizes='[10, 30, 50, 100]' :page-size='ruleForm.pageSize' layout='total, sizes, prev, pager, next' :total='item.total' ></el-pagination> </div> </el-col></el-row>

js

// 滚动触发按钮高亮methods: { onScroll(e) { let scrollItems = document.querySelectorAll('.scroll-item'); console.log(scrollItems) console.log(e) for (let i = scrollItems.length - 1; i >= 0; i--) { // 判断滚动条滚动距离是否大于当前滚动项可滚动距离 let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop; if (judge) { console.log(i) this.activeStep = i.toString(); break; } } }, jump(index) { console.log(index) let target = document.querySelector('.scroll_cls'); let scrollItems = document.querySelectorAll('.scroll-item'); // 判断滚动条是否滚动到底部 if (target.scrollHeight <= target.scrollTop + target.clientHeight) {console.log(index)console.log(typeof index) this.activeStep = index; } let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离) console.log(total) let distance = document.querySelector('.scroll_cls').scrollTop; // 滚动条距离滚动区域顶部的距离 console.log(distance) // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口) // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次 // 计算每一小段的距离 let step = total / 50; if (total > distance) { smoothDown(document.querySelector('.scroll_cls')); } else { let newTotal = distance - total; step = newTotal / 50; smoothUp(document.querySelector('.scroll_cls')); } // 参数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; } } document.querySelectorAll(’.scroll-item’).forEach((item, index1) => { if (index === index1) { item.scrollIntoView({ block: ’start’, behavior: ’smooth’ }) } }) }, }, mounted() { this.$nextTick(() => { console.log(1) window.addEventListener(’scroll’, this.onScroll,true) }) },

css

.scroll_cls { height: 500px; overflow: auto;}

转载自：原文链接点击这里

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