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;}

轉載自：原文鏈接點擊這里

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。