本文實(shí)例為大家分享了vue + element ui 實(shí)現(xiàn)錨點(diǎn)定位的具體代碼，供大家參考，具體內(nèi)容如下

vue

<el-row :gutter='20'> <el-col :span='3'> <!--導(dǎo)航選擇事件--> <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事件需要監(jiān)聽--> <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='渠道/團(tuán)隊(duì)id'></el-table-column> <el-table-column prop='channelName' label='渠道/團(tuán)隊(duì)'></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 ? ’項(xiàng)目’ : ’渠道團(tuán)隊(duì)’}}</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='操作時(shí)間'></el-table-column> <el-table-column prop='orderCnt' label='關(guān)聯(lián)訂單'> <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'>設(shè)置分配方案</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

// 滾動(dòng)觸發(fā)按鈕高亮methods: { onScroll(e) { let scrollItems = document.querySelectorAll('.scroll-item'); console.log(scrollItems) console.log(e) for (let i = scrollItems.length - 1; i >= 0; i--) { // 判斷滾動(dòng)條滾動(dòng)距離是否大于當(dāng)前滾動(dòng)項(xiàng)可滾動(dòng)距離 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'); // 判斷滾動(dòng)條是否滾動(dòng)到底部 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; // 錨點(diǎn)元素距離其offsetParent(這里是body)頂部的距離(待滾動(dòng)的距離) console.log(total) let distance = document.querySelector('.scroll_cls').scrollTop; // 滾動(dòng)條距離滾動(dòng)區(qū)域頂部的距離 console.log(distance) // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滾動(dòng)條距離滾動(dòng)區(qū)域頂部的距離(滾動(dòng)區(qū)域?yàn)榇翱? // 滾動(dòng)動(dòng)畫實(shí)現(xiàn), 使用setTimeout的遞歸實(shí)現(xiàn)平滑滾動(dòng)，將距離細(xì)分為50小段，10ms滾動(dòng)一次 // 計(jì)算每一小段的距離 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')); } // 參數(shù)element為滾動(dòng)區(qū)域 function smoothDown(element) { if (distance < total) { distance += step; element.scrollTop = distance; setTimeout(smoothDown.bind(this, element), 10); } else { element.scrollTop = total; } } // 參數(shù)element為滾動(dòng)區(qū)域 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;}

轉(zhuǎn)載自：原文鏈接點(diǎn)擊這里

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。