今天小編給大家分享一下vue+elementui怎么實(shí)現(xiàn)錨點(diǎn)定位的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)公司10多年企業(yè)網(wǎng)站建設(shè)服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站建設(shè)及推廣,對(duì)成都汽車玻璃修復(fù)等多個(gè)方面擁有豐富的網(wǎng)站運(yùn)維經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

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)聽(tīng)-->
   <el-col :span="21" class="scroll_cls" @scroll="onScroll">
    <div v-for="(item,index) in tableObject" :key="index" >
     <div class="title scroll-item" :id="item.name">{{item.name}}</div>
     <el-table :data="item.rows" :key="index">
      <el-table-column label="序號(hào)" 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="版本號(hào)"></el-table-column>
      <el-table-column prop="hierarchy" label="級(jí)別">
       <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)畫(huà)實(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;
}

以上就是“vue+elementui怎么實(shí)現(xiàn)錨點(diǎn)定位”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：vue+elementui怎么實(shí)現(xiàn)錨點(diǎn)定位
標(biāo)題URL：http://www.rwnh.cn/article40/jipceo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)公司、軟件開(kāi)發(fā)、關(guān)鍵詞優(yōu)化、網(wǎng)站排名、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)