介紹
實(shí)現(xiàn)點(diǎn)擊一個(gè)錨點(diǎn)（導(dǎo)航）痕鳍，跳轉(zhuǎn)到對(duì)應(yīng)的區(qū)塊；容器滾動(dòng)時(shí)旷坦，對(duì)應(yīng)的錨點(diǎn)高亮庸诱；
項(xiàng)目演示地址
http://admin-vuetify.bysir.top:1080/#/anchorScroll
安裝及使用
安裝
npm i scroll-anchor --save
使用
- Dom結(jié)構(gòu)
<div class="main">
<div class="sections">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
</div>
<div class="anchor-list">
<div class="anchor-item">1</div>
<div class="anchor-item">2</div>
<div class="anchor-item">3</div>
<div class="anchor-item">4</div>
</div>
</div>
- 引用
- 通過(guò)
import方式
import ScrollAnchor from 'scroll-anchor'
- 通過(guò)
CDN方式
<script src="https://unpkg.com/scroll-anchor@1.0.4/dist/index.js"></script>
- 使用
new ScrollAnchor({
section: 'section',
anchor: 'anchor-item',
paddingTop: 50,
lastActive: true,
duration: 3000,
})
配置項(xiàng)
- section: 'section', // 跳轉(zhuǎn)的板塊類(lèi)名，必填
- anchor: 'anchor-item', // 錨點(diǎn)類(lèi)名粗卜；必填
- paddingTop: 50, // 距離容器多少 下一個(gè)高亮屋确；默認(rèn)：0
- lastActive: true, // 最后一個(gè)是否高亮；默認(rèn)：false
- duration: 3000, // 速度（ms）默認(rèn)：1000(ms）
- scrollContainer: 'scrollContainer' // 板塊的容器续扔，默認(rèn)：window
注意：
單頁(yè)面（vue項(xiàng)目中）攻臀，在組件銷(xiāo)毀的情況下，需要調(diào)用實(shí)例的滾動(dòng)事件移除
this.$once('hook:beforeDestroy', () => {
instance.$emit('removeEvent') // 移除滾動(dòng)事件
})
