vue實現(xiàn)錨點跳轉(zhuǎn)及滾動監(jiān)聽的方法

更新時間：2022年07月05日 12:50:47 作者：qq_35280696

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)錨點跳轉(zhuǎn)及滾動監(jiān)聽的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue中實現(xiàn)錨點跳轉(zhuǎn)以及滾動監(jiān)聽跳轉(zhuǎn)到相應(yīng)標(biāo)簽的方法，供大家參考，具體內(nèi)容如下

*注意·如果scroll-item的最后一個元素高度必須大于等于滾動區(qū)域的高度，不然最后一個元素就滾動不上去，

scrollIntoView接口的具體參數(shù)說明

實際效果圖

代碼結(jié)構(gòu)

// Html結(jié)構(gòu)
<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>

//功能實現(xiàn)代碼
<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",//默認(rèn)跳轉(zhuǎn)到頂部
? ? ? ? ? ? behavior: "smooth"http://滾動的速度
? ? ? ? ? });
? ? ? ? }
? ? ? }
? ? },
? ? onScroll(e) {
? ? ? let scrollItems = document.querySelectorAll(".scroll-item");
? ? ? for (let i = scrollItems.length - 1; i >= 0; i--) {
? ? ? ? // 判斷滾動條滾動距離是否大于當(dāng)前滾動項可滾動距離
? ? ? ? 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為高度自適應(yīng)的話，那么最后一個scroll-item就得設(shè)置min-height：100%* /
</style>

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

您可能感興趣的文章: